Темная по своему оформлению кнопка со знаком шрифтового стиля идет с эффектом, где не с какой стороны не будет набиваться анимация, она здесь идет по стандарту. А точнее вы наводите курсор и автоматически по всем сторонам появится рамка в несколько пикселей, где изначально задан светло желтая палитра, что на темном фоне отлично выражает свой стиль.
Где можно ее закруглить, что также обводу придать оформление, а точнее кардинально изменить, или все оставить по минимальному, так, чтоб было просто видно, что клик наведет и остается сделать клик. Но все же давайте согласимся, хоть такой небольшой дизайн иногда главного замечен, что мы создаем на сайте.
Установка:
HTML
Код
<a href="#" class="kvadegam-uaivaivales green ion-ios-analytics-outline"></a>
<a href="#" class="kvadegam-uaivaivales blue ion-ios-analytics"></a>
<a href="#" class="kvadegam-uaivaivales navy ion-navigate"></a>
<a href="#" class="kvadegam-uaivaivales yellow ion-pinpoint"></a>
<a href="#" class="kvadegam-uaivaivales red ion-ios-paw"></a>
<a href="#" class="kvadegam-uaivaivales silver ion-ios-keypad"></a>
CSS
Код
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.kvadegam-uaivaivales {
position: relative;
font-size: 40px;
background-color: #3c3838;
color: #f5efef;
width: 75px;
margin: 40px;
height: 75px;
line-height: 75px;
display: inline-block;
text-align: center;
text-shadow: 1px 1px 1px rgb(37 37 37 / 60%);
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kvadegam-uaivaivales:after {
position: absolute;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
background: #f39c12;
content: '';
z-index: -1;
-webkit-transform: rotate(7deg) scale(0.8);
transform: rotate(7deg) scale(0.8);
}
.kvadegam-uaivaivales:before,
.kvadegam-uaivaivales:after {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.kvadegam-uaivaivales:hover,
.kvadegam-uaivaivales:active,
.kvadegam-uaivaivales.hover {
color: #ffffff;
text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.8);
}
.kvadegam-uaivaivales:hover:after,
.kvadegam-uaivaivales:active:after,
.kvadegam-uaivaivales.hover:after {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
Такой вариант всегда пригодится для функциональности сайта или блога, но все же все создано на чистой стилистике при помощи CSS, то безусловно здесь можно привнести свои изменение.
Демонстрация
