Кнопки для сайта
Проверить работу кнопочек можно в редакторе.
Ещё кнопки смотрите в других статьях на сайте:
Первый вариант кнопки
Кнопка с верхней и нижней подсветкой. Кнопка хорошо смотрится на картинках или тёмном фоне. Для белого фона в коде можно сделать изменения, изменить цвет шрифта и градиента.
<div class="glass-btn glass-btn-red">
<a href="#url">Текст кнопки</a>
</div>
<div class="glass-btn glass-btn-blue">
<a href="#url">Текст кнопки</a>
</div>
<div class="glass-btn glass-btn-green">
<a href="#url">Текст кнопки</a>
</div>
<style>
.glass-btn {
position: relative;
width: 220px;
height: 50px;
margin: 20px;
display: inline-block;
text-align: center;
}
.glass-btn a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
border-radius: 30px;
padding: 0 10px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
color: #fff;
font-family: "Roboto", sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 1;
transition: 0.5s;
backdrop-filter: blur(15px);
}
.glass-btn:hover a {
letter-spacing: 3px;
}
.glass-btn a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
transform: skewX(45deg) translate(0);
transition: 0.5s;
filter: blur(0px);
}
.glass-btn:hover a:before {
transform: skewX(45deg) translate(200px);
}
.glass-btn a:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transition: 0.5s;
border-radius: 30px;
z-index: -1;
}
.glass-btn:hover a:after {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.glass-btn:before {
content: "";
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: -5px;
width: 30px;
height: 10px;
background: #f00;
border-radius: 10px;
transition: 0.5s;
transition-delay: 0.5;
}
.glass-btn:hover:before {
bottom: 0;
height: 50%;
width: 80%;
border-radius: 30px;
}
.glass-btn:after {
content: "";
position: absolute;
left: 50%;
transform: translatex(-50%);
top: -5px;
width: 30px;
height: 10px;
background: #f00;
border-radius: 10px;
transition: 0.5s;
transition-delay: 0.5;
}
.glass-btn:hover:after {
top: 0;
height: 50%;
width: 80%;
border-radius: 30px;
}
.glass-btn.glass-btn-red a:after,
.glass-btn.glass-btn-red:before,
.glass-btn.glass-btn-red:after {
background: #ff4747;
box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass-btn.glass-btn-blue a:after,
.glass-btn.glass-btn-blue:before,
.glass-btn.glass-btn-blue:after {
background: #419cec;
box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass-btn.glass-btn-green a:after,
.glass-btn.glass-btn-green:before,
.glass-btn.glass-btn-green:after {
background: #38ba35;
box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}
</style>
Поменять в коде можно:Цвет кнопки в коде выделила в соответствии с цветом. Красная кнопка – красным, синяя – синим, зелёная – зелёным. Выбирайте нужный цвет, а лишние отрезки кода убираем.
Текст на кнопке – выделила в коде салатовым.
Шрифт – жёлтым
Цвет текста на кнопке – оранжевым
Цвет градиента – голубым
Если покопаться в коде цвет кнопки можно сделать не только этих трёх цветов.
Второй вариант кнопки
Кнопка с нижней подсветкой.
Код:
<div class="glass-btn glass-btn-red">
<a href="#url">Текст кнопки</a>
</div>
<div class="glass-btn glass-btn-blue">
<a href="#url">Текст кнопки</a>
</div>
<div class="glass-btn glass-btn-green">
<a href="#url">Текст кнопки</a>
</div>
<style>
.glass-btn {
position: relative;
width: 220px;
height: 50px;
margin: 20px;
display: inline-block;
text-align: center;
}
.glass-btn a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
border-radius: 30px;
padding: 0 10px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
color: #fff;
font-family: "Roboto", sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 1;
transition: 0.5s;
backdrop-filter: blur(15px);
}
.glass-btn:hover a {
letter-spacing: 3px;
}
.glass-btn a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
transform: skewX(45deg) translate(0);
transition: 0.5s;
filter: blur(0px);
}
.glass-btn:hover a:before {
transform: skewX(45deg) translate(200px);
}
.glass-btn a:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
transition: 0.5s;
border-radius: 30px;
z-index: -1;
}
.glass-btn:hover a:after {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.glass-btn:before {
content: "";
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: -5px;
width: 30px;
height: 10px;
background: #f00;
border-radius: 10px;
transition: 0.5s;
transition-delay: 0.5;
}
.glass-btn:hover:before {
bottom: 0;
height: 80%;
width: 80%;
border-radius: 30px;
}
.glass-btn.glass-btn-red a:after,
.glass-btn.glass-btn-red:before {
background: #ff4747;
box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass-btn.glass-btn-blue a:after,
.glass-btn.glass-btn-blue:before{
background: #419cec;
box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass-btn.glass-btn-green a:after,
.glass-btn.glass-btn-green:before {
background: #38ba35;
box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}
</style>
В коде меняем то же самое, что и в предыдущем.
Комментарии со спамом удаляются.