Здесь вы найдете самые стильные кнопки с оригинальным эффектом при помощи CSS, которые появляются при наведении клика. Также есть тематические кнопки, как пример, это для интернета магазина, что когда наводите клик появляется корзина. Очень большая подборка, что вы при выборе изначально можете проверить их на свойство эффекта.
Так как эти самые трюки исполнены на чистом CSS, что имеют разнообразный стиль анимации. Все они отличаются, где просто невозможно найти одинаковую стилистику, а значит вы точно подберете именно ту кнопку, которая будет стильно смотреться на вашем сайте.
Кнопка с правой скользящей иконкой при наведении
HTML
Код
<button class="krasiva_tryuka"><span>Первая</span><i class="ion-android-done"></i></button>
<button class="krasiva_tryuka blue"><span>Вторая</span><i class="ion-android-arrow-forward"></i></button>
<button class="krasiva_tryuka red"><span>Третья</span><i class="ion-ios-cart"></i></button>
<button class="krasiva_tryuka yellow"><span>Четвертая</span><i class="ion-android-create"></i></button>
CSS
Код
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
button.krasiva_tryuka {
font-family: 'Raleway', Arial, sans-serif;
border: none;
background-color: #000000;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
padding: 10px 40px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
line-height: 1.5em;
font-weight: 500;
font-size: 1em;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
button.krasiva_tryuka span {
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.8;
}
button.krasiva_tryuka i {
font-size: 22px;
left: 15px;
position: absolute;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
button.krasiva_tryuka:before {
content: '';
top: 0;
left: 0;
width: 0;
position: absolute;
height: 100%;
background: rgba(255, 255, 255, 0.2);
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
button.krasiva_tryuka:hover span,
button.krasiva_tryuka.hover span {
-webkit-transform: translate3d(20px, 0px, 0px);
transform: translate3d(20px, 0px, 0px);
opacity: 1;
}
button.krasiva_tryuka:hover i,
button.krasiva_tryuka.hover i {
opacity: 1;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
button.krasiva_tryuka:hover:before,
button.krasiva_tryuka.hover:before {
width: 44px;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
button.krasiva_tryuka:active:before {
background: rgba(255, 255, 255, 0.3);
}
button.krasiva_tryuka.blue {
background-color: #20638f;
}
button.krasiva_tryuka.red {
background-color: #962d22;
}
button.krasiva_tryuka.yellow {
background-color: #a85913;
}
Переходим к демонстраций
