Красивые и простые кнопки для сайта — готовые макеты, которые легко копировать и вставлять на свой сайт. Скачать бесплатные готовые кнопки для навигации, меню, страниц и ссылок легко и быстро! Создавайте привлекательные интерфейсы без лишних усилий.
HTML
<a class="knopka"></a>CSS
.knopka{
background: linear-gradient(#bbfcb4 0%, #21a300 36%, #21a300 63%, #bbfcb4 100%);
text-decoration: none;
cursor: pointer;
padding: 10px;
border-radius: 5px;
color: #ffffff;
}text-decoration: none;
cursor: pointer;
padding: 10px;
border-radius: 5px;
color: #ffffff;
.knopka:hover{
color: #aeed30;
}
HTML
<a class="knopka2"></a>CSS
.knopka2{
background: #fe284a;
text-decoration: none;
cursor: pointer;
padding: 10px;
border-radius: 5px;
color: #ffffff;
box-shadow: 0 3px 0 0 #871628, 0 4px 4px 0 #000;
}text-decoration: none;
cursor: pointer;
padding: 10px;
border-radius: 5px;
color: #ffffff;
box-shadow: 0 3px 0 0 #871628, 0 4px 4px 0 #000;
.knopka2:hover{
color: #871628;
}HTML
<a class="knopka3"></a>CSS
.knopka3{
background: linear-gradient(90deg, #28075E 0%, #5F208F 50.94%, #28075E 100%);
text-decoration: none;
cursor: pointer;
padding: 8px 25px;
border-radius: 15px 0px 15px 0px;
color: #ffffff;
}text-decoration: none;
cursor: pointer;
padding: 8px 25px;
border-radius: 15px 0px 15px 0px;
color: #ffffff;
.knopka3:hover{
color: #000000;
}HTML
<a class="knopka4"></a>CSS
.knopka4{
display: inline-block;
background-color: #EEDC82;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
color: #000;
transition: all 0.2s ease;
}text-decoration: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
color: #000;
transition: all 0.2s ease;
.knopka4:active{
transform: scale(0.95);
background-color: #D4B76A;
}background-color: #D4B76A;
HTML
<a class="knopka5"></a>CSS
.knopka5{
display: inline-block;
background-color: #66ccff;
text-decoration: none;
cursor: pointer;
padding: 12px 24px;
font-size: 16px;
border-radius: 8px;
color: #fff;
transition: all 0.2s ease;
border: none;
box-shadow: 4px 4px 10px rgba(0,0,0,0.2), -4px -4px 10px rgba(255,255,255,0.7);
}text-decoration: none;
cursor: pointer;
padding: 12px 24px;
font-size: 16px;
border-radius: 8px;
color: #fff;
transition: all 0.2s ease;
border: none;
box-shadow: 4px 4px 10px rgba(0,0,0,0.2), -4px -4px 10px rgba(255,255,255,0.7);
.knopka5:active{
transform: translateY(2px);
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2), inset -4px -4px 10px rgba(255,255,255,0.7);
}box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2), inset -4px -4px 10px rgba(255,255,255,0.7);
Avtor - Андрей
Date - 22.08.2025
Коментарии:
Андрей
Прикольно спасибо за кнопку
23.08.2025
Евгений
Взял пару кнопок себе на сайт, все работает, спасибо!
23.08.2025
