Это оригинальный эффект, который состоит в том, что изначально мы видим круглую кнопку и по центру идет шрифтовая иконка. Но стоит навести курсор, как она начинает увеличивается по своим размерам, где не теряет свой формат, и просто смотрится великолепно по своему оформлению.
Установка:
HTML
Код
<a href="#" class="enlargemen_karkasa green ion-spoon"></a>
<a href="#" class="enlargemen_karkasa blue ion-soup-can-outline"></a>
<a href="#" class="enlargemen_karkasa navy ion-soup-can"></a>
<a href="#" class="enlargemen_karkasa yellow ion-beer"></a>
<a href="#" class="enlargemen_karkasa red ion-wineglass"></a>
<a href="#" class="enlargemen_karkasa ion-coffee"></a>
CSS
Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.enlargemen_karkasa {
position: relative;
font-size: 38px;
color: #ffffff;
width: 72px;
margin: 40px;
height: 72px;
line-height: 72px;
display: inline-block;
text-align: center;
border-radius: 50%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.enlargemen_karkasa * {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.enlargemen_karkasa:before,
.enlargemen_karkasa:after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.enlargemen_karkasa:before {
color: #000000;
}
.enlargemen_karkasa:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #000000;
content: '';
z-index: -1;
border-radius: 50%;
box-sizing: border-box;
}
.enlargemen_karkasa.blue:before {
color: #2980b9;
}
.enlargemen_karkasa.blue:after {
border-color: #2980b9;
}
.enlargemen_karkasa.yellow:before {
color: #f39c12;
}
.enlargemen_karkasa.yellow:after {
border-color: #f39c12;
}
.enlargemen_karkasa.green:before {
color: #27ae60;
}
.enlargemen_karkasa.green:after {
border-color: #27ae60;
}
.enlargemen_karkasa.navy:before {
color: #34495e;
}
.enlargemen_karkasa.navy:after {
border-color: #34495e;
}
.enlargemen_karkasa.red:before {
color: #c0392b;
}
.enlargemen_karkasa.red:after {
border-color: #c0392b;
}
.enlargemen_karkasa:hover,
.enlargemen_karkasa .hover {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.enlargemen_karkasa:hover:after,
.enlargemen_karkasa .hover:after {
opacity: 0.5;
border-width: 8px;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Установочный процесс завершен.
Демонстрация