Оформление кнопок
Красивые кнопки на сайте выполняют ряд важных функций. Во-первых, они делают интерфейс более привлекательным и современным, что помогает удерживать внимание посетителей и повышает вероятность того, что они выполнят нужное действие. Кроме того, красивые кнопки улучшают пользовательский опыт, делая навигацию более интуитивной и удобной. Также они могут быть использованы для привлечения внимания к важным элементам сайта или для подчеркивания ключевых действий, которые хочет сделать посетитель. В целом, красивые кнопки помогают улучшить конверсию и повысить уровень вовлеченности пользователей на сайте.
Кнопка 1
<div class="grid">
<div class="button-container">
<button class="stretch-up">Название</button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;
}
button:hover {
cursor: pointer;
}
.button-container:hover .stretch-up {
animation: stretchUp 0.6s forwards;
}
@keyframes stretchUp {
70% {
transform: translateY(-20px) scale(1, 1.6);
}
73% {
transform: translateY(-40px) scale(1, 1);
}
76% {
transform: translateY(-5px) scale(1, 1);
}
85% {
transform: translateY(-10px) scale(1, 1);
}
90% {
transform: translateY(0) scale(1, 1);
}
}</style>
Кнопка 2
<div class="grid">
<div class="button-container">
<button class="stretch-out">Название</button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}
.button-container:hover .stretch-out {
animation: stretchOut 0.6s forwards;
}
@keyframes stretchOut {
45% {
transform: scale(1.5, 0.7);
border-radius: 15px;
}
50% {
transform: scale(0.5, 1.3);
}
55% {
transform: scale(1.3, 0.8);
}
60% {
transform: scale(1, 1.2);
}
65% {
transform: scale(1.1, 0.9);
}
70% {
transform: scale(1, 1);
}
75% {
transform: scale(1.1, 1);
}
100% {
transform: scale(1, 1);
}
}
</style>
Читайте на блоге:
Кнопка 3
<div class="grid">
<div class="button-container">
<button class="squish-in">Название </button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}
.button-container:hover .squish-in {
animation: squish-in 0.5s forwards;
}
@keyframes squish-in {
60% {
transform: scale(0.5, 1.6);
border-radius: 45% 45% 45% 45% / 40% 40% 40% 40%;
}
70% {
transform: scale(1.5, 0.7);
border-radius: 15px;
}
80% {
transform: scale(0.9, 1.3);
border-radius: 25% 25% 25% 25% / 20% 20% 20% 20%;
}
85% {
transform: scale(1.2, 0.9);
border-radius: 15px;
}
90% {
transform: scale(1, 1.1);
border-radius: 15px;
}
}
</style>
Кнопка 4
<div class="grid">
<div class="button-container">
<button class="squish-down">Название</button>
</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}.button-container:hover .squish-down {
animation: squish-down 0.5s forwards;
}
@keyframes squish-down {
70% {
transform: scale(1, 0.3) translateY(70px);
}
75% {
transform: scale(1, 1.5) translateY(-15px);
}
80%,
90% {
transform: scale(1, 1.2) translateY(-10px);
}
85% {
transform: scale(1, 0.9) translateY(0);
}
}
</style>
Текст на кнопке — выделила в коде жирным, меняйте на свой.
Градиент кнопок — выделила красным.
Окантовку — выделила синим.
Скругление углов — меняйте значение на большее или меньшее. В коде отметила зелёным цветом.
Размер шрифта — оранжевым.
Цвет шрифта — голубым
Комментарии со спамом удаляются.