سلام
این که بخای یه آیکونی به اینصورت گرد باشه و وقتی موس روش بیاد تغییر رنگ بده و حالا یه افکت کوچکی داشته باشه کار زیاد سختی نیست.
بصورت کلی اینطوریه که شما یه آیکون دارید ، یه رنگ پس زمینه بهش میدین و چیزایی که نیاز داره ، حالا باید برای اون قسمت یه آی دی یا کلاس تعریف کنید و کدهای مشابه زیر رو بهش بدید.
background: transparent none repeat scroll 0 0;
border: 1px solid #ddd;
height: 98px;
width: 98px;
left: 1px;
top: 1px;
z-index: 1;
position: absolute;
-webkit-transition-timing-function: cubic-bezier(0.5, -0.7, 0.67, 0.7);
-moz-transition-timing-function: cubic-bezier(0.5, -0.7, 0.67, 0.7);
transition-timing-function: cubic-bezier(0.5, -0.7, 0.67, 0.7);
بعد هم برای اینکه موس روش بیاد تغییر کنه یه سودو به کلاس یا آی دی اضاف میکنی . class:hover
border-radius: 50%;
font-size: 2rem;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
vertical-align: middle;
margin-bottom: 0.75rem;
color: #439a86;
position: relative;
display: inline-block;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
transition-timing-function: linear;
اینها کدهای صفحه مورد نظر شماست حالا یذره باید ویرایش بشه