Нестандартная анимация кнопок
Все инструкции и код для каждой кнопки ниже
Скопировать код
1-5 мин.
CSS
Кнопки
1
2
Смена цвета при наведении
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-1"
Прописываем вместо #294CC4 свой цвет
<style>
/* Смена цвета при наведении */
.btn-1 .tn-atom:hover {
background: #294cc4;
}
</style>
1
2
Тень при наведении
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-2"
Просто копируем настройки box-shadow из фигмы
<style>
/* Тень при наведении */
.btn-2 .tn-atom:hover {
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .5),
inset -4px -4px 6px 0 rgba(255,255,255,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
</style>
1
2
Линии при наведении
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-3"
Задаем по комментариям в коде цвет текста при наведении, цвет линий при наведении и тени линий при наведении (код для теней взять из фигмы)
<style>
/* Линии при наведении */
.btn-3 .tn-atom:hover {
color: #f0094a !important; /*Задаем цвет текста при наведении*/
background: transparent !important;
box-shadow:none !important;
}
.btn-3 .tn-atom:before,
.btn-3 .tn-atom:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px; /* Задаем толщину линий*/
width:0;
background: #f0094a; /*Задаем цвет линий при наведении*/
box-shadow:
-1px -1px 5px 0px #fff,
7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002; /*Цвети теней линий при наведении. Можно скопировать из фигмы по примеру*/
transition:400ms ease all;
}
.btn-3 .tn-atom:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.btn-3 .tn-atom:hover:before,
.btn-3 .tn-atom:hover:after{
width:100%;
transition:800ms ease all;
}
</style>
1
2
Переворот фона при наведении
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-4"
Задаем по комментариям в коде цвет фона, цвет фона при наведении, тени и цвет текста при наведении (код градиента я взял из фигмы)
<style>
/* Переворот фона при наведении */
.btn-4 .tn-atom {
border: none !important;
transition: all 0.3s ease;
overflow: hidden;
background-color: unset !important;
}
.btn-4 .tn-atom:after {
position: absolute;
content: " ";
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(242.8deg, rgba(16, 241, 255, 0.84) 15.99%, rgba(255, 16, 202, 0.54) 85.39%) !important; /*Цвет фона, который можно задать в виде #ffffff, можно скопировать градиент из фигмы*/
transition: all 0.3s ease;
}
.btn-4 .tn-atom:hover {
background: transparent;
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3); /*Настройки тени при наведении копировал из фигмы*/
color: #fff !important; /*Цвет текста при наведении*/
}
.btn-4 .tn-atom:hover:after {
-webkit-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3); /*Те же настройки тени при наведении, копировал из фигмы*/
}
</style>
1
2
Прозрачный фон и смена цвета border
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-5"
Задаем вместо #76AEF1 свой цвет при наведении
<style>
/* Прозрачный фон и смена цвета border */
.btn-5 .tn-atom {
line-height: 42px;
padding: 0;
}
.btn-5 .tn-atom:hover{
background: transparent !important;
color: #76aef1 !important; /*Цвет бордера и текста, при наведении*/
box-shadow: none !important;
border: solid !important;
}
</style>
1
2
Увеличение фона из центра при наведении
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-6"
Задаем вместо #FFA6A5 свой цвет фона при наведении и вместо #fff свой цвет текста при наведении
<style>
/* Увеличение фона из центра при наведении */
.btn-6 .tn-atom {
transition: all 0.3s ease;
overflow: hidden;
}
.btn-6 .tn-atom:after {
position: absolute;
content: " ";
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: all 0.3s ease;
-webkit-transform: scale(.1);
transform: scale(.1);
}
.btn-6 .tn-atom:hover {
color: #fff !important; /*Цвет текста при наведении*/
background: transparent !important;
}
.btn-6 .tn-atom:hover:after {
background: #FFA6A5; /*Фон при наведении*/
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
1
2
Переключение цвета фона сверху вниз
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-7"
Задаем вместо #60f0a1 свой цвет фона при наведении и вместо #fff свой цвет текста при наведении. Настроки теней берем из фигмы
<style>
/* Переключение цвета фона сверху вниз */
.btn-7 .tn-atom {
z-index: 1;
position: relative;
}
.btn-7 .tn-atom:after {
position: absolute;
content: "";
width: 100%;
height: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: #60f0a1 !important; /*Цвет фона при наведении*/
box-shadow:
7px 7px 20px 0px #fff9,
4px 4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001; /*Тень при наведении (копировать из фигмы)*/
transition: all 0.3s ease;
}
.btn-7 .tn-atom:hover {
color: #fff !important; /*Цвет текста при наведении*/
}
.btn-7 .tn-atom:hover:after {
top: 0;
height: 100%;
}
.btn-7 .tn-atom:active {
top: 2px;
}
</style>
1
2
Переключение цвета фона снизу вверх
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-8"
Задаем вместо #eaf818 свой цвет фона при наведении и вместо #000 свой цвет текста при наведении. Настроки теней берем из фигмы
<style>
/* Переключение цвета фона слева направо */
.btn-8 .tn-atom {
z-index: 1;
position: relative;
}
.btn-8 .tn-atom:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
background-color: #eaf818; /* Цвет фона при наведении*/
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1); /*Тени при наведении (брать в фигме)*/
transition: all 0.3s ease;
}
.btn-8 .tn-atom:hover {
color: #000 !important; /*Цвет текста при наведении*/
}
.btn-8 .tn-atom:hover:after {
top: auto;
bottom: 0;
height: 100%;
}
.btn-8 .tn-atom:active {
top: 2px;
}
</style>
1
2
Переключение цвета фона cлева направо
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-9"
Задаем вместо #663dff свой цвет фона при наведении и вместо #fff свой цвет текста при наведении. Настроки теней берем из фигмы
<style>
/* Переключение цвета фона слева направо */
.btn-9 .tn-atom {
z-index: 1;
position: relative;
}
.btn-9 .tn-atom:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
right: 0;
z-index: -1;
background-color: #663dff; /* Цвет фона при наведении*/
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1); /*Тени при наведении (брать в фигме)*/
transition: all 0.3s ease;
}
.btn-9 .tn-atom:hover {
color: #fff !important; /*Цвет текста при наведении*/
}
.btn-9 .tn-atom:hover:after {
left: 0;
width: 100%;
}
.btn-9 .tn-atom:active {
top: 2px;
}
</style>
1
2
Переключение цвета фона справа налево
Жмём по кнопкам, на которые нужен эффект ПКМ => Add CSS Class Name и задаем класс - "btn-10"
Задаем вместо #3dfbbc свой цвет фона при наведении и вместо #fff свой цвет текста при наведении. Настроки теней берем из фигмы
<style>
/* Переключение цвета фона справа налево */
.btn-10 .tn-atom {
z-index: 1;
position: relative;
}
.btn-10 .tn-atom:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
background-color: #3dfbbc; /* Цвет фона при наведении*/
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001; /*Тени при наведении (брать в фигме)*/
transition: all 0.3s ease;
}
.btn-10 .tn-atom:hover {
color: #fff !important; /*Цвет текста при наведении*/
}
.btn-10 .tn-atom:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn-10 .tn-atom:active {
top: 2px;
}
</style>