| Kosten | Вторник, 03 Июля 2018, 19:51 | Сообщение 1 |
| Отличный дизайн и оригинальный hover эффект для подборки кнопок, которые красиво смотрятся на светлом или темном сайте. Так как идет обвод под несколько пикселей, где присутствует тень. что можно больше или меньше ее по умолчанию поставить. Вообщем тема такая, что такой вариант можно поставить на любой сайт, где будет даже сильно оригинальная тематика.
Здесь эффект заключается в в том, что при наведение будет как дворники сходится, это с правой и левой стороны. И по итогу заполняется гамма цвета, где автоматически меняется гамма у знаков. По своей конструкций, можно сделать с углами, но при проверке здесь их убрал и уже после этого когда начал на сайте размешать. вспомнил, что нужно тени добавить, что на изображение их нет.
HTML
Код <p>С левого края</p> <button class="bexceptionak-lydexciting"><span>Оригинальный дизайн</span></button> <button class="bexceptionak-lydexciting"><span>Оригинальный дизайн</span></button> <button class="bexceptionak-lydexciting"><span>Оригинальный дизайн</span></button> <p>Справа</p> <a href="#" class="bexceptionak-lydexciting partydevelopers"><span>Оригинальный</span></a> <a href="#" class="bexceptionak-lydexciting partydevelopers"><span>Оригинальный</span></a> <a href="#" class="bexceptionak-lydexciting partydevelopers"><span>Оригинальный</span></a> <p>Двойные панели с обоих краев</p> <a href="#" class="bexceptionak-lydexciting dualslide"><span>ZORNET.RU</span></a> <a href="#" class="bexceptionak-lydexciting dualslide"><span>ZORNET.RU</span></a> <a href="#" class="bexceptionak-lydexciting dualslide"><span>ZORNET.RU</span></a>
CSS
Код .bexceptionak-lydexciting {
border: 1.8px solid #a79f9f;
background: #f5f0f0;
display: inline-block;
padding: 15px 23px;
margin: 10px;
font: normal 18px 'Lato', sans-serif;
border-radius: 35px;
cursor: pointer;
position: relative;
outline: none;
text-decoration: none;
color: #464343;
overflow: hidden;
z-index: 100;
transition: all .4s;
box-shadow: 0px 4px 10px rgba(45, 41, 41, 0.19), 0px 10px 30px -15px rgba(43, 41, 41, 0.15);
}
.bexceptionak-lydexciting > span{
position: relative;
display: block;
z-index: 100;
}
.bexceptionak-lydexciting:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #8e1183;
top: 0;
left: 0;
-webkit-transform: skew(-10deg) translate3d(-103%,0,0);
transform: skew(-10deg) translate3d(-103%,0,0);
border-right: 1px solid #8e1188;
transition: all .5s;
}
.bexceptionak-lydexciting:hover {
color: #f9f3f3;
background: #bc31aa;
}
.bexceptionak-lydexciting:hover:before{
-webkit-transform: skew(-10deg) translate3d(-50%,0,0);
transform: skew(-10deg) translate3d(-50%,0,0);
}
.bexceptionak-lydexciting.partydevelopers:before{
-webkit-transform: skew(-10deg) translate3d(103%,0,0);
transform: skew(-10deg) translate3d(103%,0,0);
}
.bexceptionak-lydexciting.partydevelopers:hover:before{
-webkit-transform: skew(-10deg) translate3d(50%,0,0);
transform: skew(-10deg) translate3d(50%,0,0);
}
.bexceptionak-lydexciting.dualslide{
background: white;
}
.bexceptionak-lydexciting.dualslide:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #BC3A31;
top: 0;
left: 0;
-webkit-transform: skew(-10deg) translate3d(-103%,0,0);
transform: skew(-10deg) translate3d(103%,0,0);
border-right: 1px solid #8E1911;
transition: all .5s;
}
.bexceptionak-lydexciting.dualslide:hover:after{
-webkit-transform: skew(-10deg) translate3d(50%,0,0);
transform: skew(-10deg) translate3d(50%,0,0);
}
Здесь вашему вниманию 3 кнопки, и у каждой уникальная анимация.
Демонстрация
| | Страна: (RU) |
| |
