Дата и время публикации : 03 Июня 17 в 04:12 | Раздел : Кнопки для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 03 Июня 17, Суббота, 04:12 |
| Адапт. дизайн | |
| Обновления | Не производились |
| Просмотрен | 596 |
Классный эффект при наведении на кнопку. Такое встретишь не так часто, по этому было бы не плохо поделится с вами данной реализацией.
Установка и настройка тривиальная. Вам остается только добавить нужный код самой кнопки для ее отображения и прописать стили для нее.
По умолчанию кнопка имеет темный вид, но вы ее сможете настроить под светлые проекты, достаточно изменить в стилях нужный вам цвет, размер и так далее. В общем экспериментируйте. Применяйте такую реализацию в своих проектах и удивляйте своих пользователей чем-то интересным и живым.
Установка :
1. Вставить в нужное место :
2. Подключим стили CSS на странице где будет кнопка :
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://image.ibb.co/icbLMF/ep_naturalblack.png");
}
.btn-wrapper {
width: 290px;
height: 110px;
position: relative;
margin: 40px auto 0;
}
.btn-wrapper:hover .btn-inner {
top: -4px;
transform: scale(1, 1);
cursor: pointer;
}
.btn-wrapper__container {
border-bottom: 2px solid #15B5E2;
position: absolute;
width: 100%;
height: 80px;
}
.btn-wrapper__container:before,
.btn-wrapper__container:after {
border-bottom: 2px solid #15B5E2;
width: 96%;
left: 2%;
bottom: -8px;
content: "";
position: absolute;
}
.btn-wrapper__container:after {
width: 92%;
left: 4%;
bottom: -14px;
}
.btn-wrapper__container .btn-inner {
width: 104.2%;
height: 100%;
position: absolute;
top: 20px;
left: -2.1%;
border: 2px solid #15B5E2;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 18px;
background: #10131C;
transform: scale(0.96, 0.96);
transition: all .3s;
z-index: 4;
}
.btn-wrapper__container .btn-inner__text {
text-decoration: none;
color: #15B5E2;
}
</style>
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияСамый, казалось бы, незамысловатый элемент на uCoz сайте — переключатель страниц, которому большинство уделяют мало внимания, но который можн...
