Hover css

درود...
متوجه سوال آخر نشدم.
یه عکسی بگیر تا ببینم.

عکس نمیاد داداش گوگلو ک باز میکنی
کنار image
یک مربع های ریزی هست ک روش نگه داری زیر ش نوشته google apps
وقتی رو این نگه میداری پشتش ی دایره ای
میاد اونو
میخام با hover در بیارم

سلام
@Reyns

HTML

<a href="#" class="btn">
      <svg fill="#fff" viewBox="0 0 24 24"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
    </a>

CSS

.btn {
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px;
}

.btn:hover {
  background: rgba(212, 208, 208, 0.03);
}