• Страница 1 из 1
  • 1
Красивый дизайн для кнопок на чистом CSS
Kosten
Четверг, 20 Февраля 2020, 20:45 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Здесь представлен дизайн, который содержат градиент, а также тени. Что отлично подойдет под кнопки любой тематики, так как самостоятельно можно изменить цветовую гамму, которая соответствует сайту.



HTML

Код
<div class="original-knopka">Кнопки</div>

CSS

Код
.original-knopka {
    margin: 2em auto;
    display: block;
    -webkit-appearance: none;
    border: 6px solid rgba(247, 240, 240, 0.45);
    border-radius: 50px;
    padding: 1em 3em;
    background-repeat: no-repeat;
    background-size: 100%;
    background-clip: padding-box;
    position: relative;
    color: #fffdfd;
    background-image: linear-gradient(90deg, #5b62e4, #34f2f5);
}

.original-knopka:before{content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 50px;
    z-index: -1;
    filter: blur(14px);    background-image: linear-gradient(90deg, #7b81ec, transparent);}

.original-knopka:after{content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 50px;
    z-index: -1;
    filter: blur(14px);
background-image: linear-gradient(90deg, transparent, #3bd1d3);}

На этом все!

Демонстрация
Прикрепления: 3697214.png (22.8 Kb) · dsabaVa.zip (2.6 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: