CSS Кнопка №11 - пример кода

Демо

4,77 КБ
HTML, CSS
Кнопка
свечение
Лицензия MIT

Код
Редактор

HTML

<a class="btn-glow btn-hover-shine">Светящаяся кнопка</a>

CSS

.btn-glow {
    font-family: Arial;
    color: #fff !important;
    background: rgb(138, 97, 248);
    background: -moz-linear-gradient(left, rgba(138, 97, 248, 1) 0%, rgba(236, 95, 231, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(138, 97, 248, 1) 0%, rgba(236, 95, 231, 1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(138, 97, 248, 1)), to(rgba(236, 95, 231, 1)));
    background: -moz-linear-gradient(left, rgba(138, 97, 248, 1) 0%, rgba(236, 95, 231, 1) 100%);
    background: -o-linear-gradient(left, rgba(138, 97, 248, 1) 0%, rgba(236, 95, 231, 1) 100%);
    background: linear-gradient(to right, rgba(138, 97, 248, 1) 0%, rgba(236, 95, 231, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a61f8', endColorstr='#ec5fe7',GradientType=1 );
    border: none;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 56px;
    letter-spacing: 0.07em;
    text-decoration: none !important;
    text-transform: uppercase;
    padding: 0 30px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-animation: glow 3s infinite;
    -moz-animation: glow 3s infinite;
    -o-animation: glow 3s infinite;
    animation: glow 3s infinite;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    position: relative;
}
.btn-glow:hover {
    -webkit-box-shadow: 0 0 0 10px #3daaa200;
    -moz-box-shadow: 0 0 0 10px #3daaa200;
    box-shadow: 0 0 0 10px #3daaa200;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    -moz-transition: 0.8s;
    transition: 0.8s;
}
@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 20px #8b61f844;
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 0px #fff;
    }
    40% {
        -webkit-box-shadow: 0 0 100px #8b61f8ee;
        box-shadow: 0 0 100px #8b61f8ee;
        text-shadow: 0 0 20px #fff;
    }
    100% {
        -webkit-box-shadow: 0 0 20px #8b61f844;
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 1px #fff;
    }
}
@-moz-keyframes glow {
    0% {
        -moz-box-shadow: 0 0 20px #8b61f844;
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 0px #fff;
    }
    40% {
        -moz-box-shadow: 0 0 100px #8b61f8ee;
        box-shadow: 0 0 100px #8b61f8ee;
        text-shadow: 0 0 20px #fff;
    }
    100% {
        -moz-box-shadow: 0 0 20px #8b61f844;
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 1px #fff;
    }
}
@-o-keyframes glow {
    0% {
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 0px #fff;
    }
    40% {
        box-shadow: 0 0 100px #8b61f8ee;
        text-shadow: 0 0 20px #fff;
    }
    100% {
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 1px #fff;
    }
}
@keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 20px #8b61f844;
        -moz-box-shadow: 0 0 20px #8b61f844;
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 0px #fff;
    }
    40% {
        -webkit-box-shadow: 0 0 100px #8b61f8ee;
        -moz-box-shadow: 0 0 100px #8b61f8ee;
        box-shadow: 0 0 100px #8b61f8ee;
        text-shadow: 0 0 20px #fff;
    }
    100% {
        -webkit-box-shadow: 0 0 20px #8b61f844;
        -moz-box-shadow: 0 0 20px #8b61f844;
        box-shadow: 0 0 20px #8b61f844;
        text-shadow: 0 0 1px #fff;
    }
}
.btn-hover-shine {
    position: relative;
}
.btn-hover-shine:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    right: 80%;
    width: 1px;
    background-color: #ffffff00;
    -webkit-box-shadow: 0 0 20px #ffd2fe00, 0 0 10px #ffd2fe00, 0 0 5px #ffd2fe00, 0 0 2px #ffd2fe00;
    -moz-box-shadow: 0 0 20px #ffd2fe00, 0 0 10px #ffd2fe00, 0 0 5px #ffd2fe00, 0 0 2px #ffd2fe00;
    box-shadow: 0 0 20px #ffd2fe00, 0 0 10px #ffd2fe00, 0 0 5px #ffd2fe00, 0 0 2px #ffd2fe00;
    opacity: 1;
}
.btn-hover-shine:hover:after {
    right: 2%;
    background-color: #ffffffff;
    -webkit-box-shadow: 0 0 30px #ffd2feff, 0 0 15px #ffd2feff, 0 0 7px #ffd2feff, 0 0 3px #ffd2feff;
    -moz-box-shadow: 0 0 30px #ffd2feff, 0 0 15px #ffd2feff, 0 0 7px #ffd2feff, 0 0 3px #ffd2feff;
    box-shadow: 0 0 30px #ffd2feff, 0 0 15px #ffd2feff, 0 0 7px #ffd2feff, 0 0 3px #ffd2feff;
    opacity: 0;
    -o-transition: 0.6s;
    -moz-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition: 0.6s;
}

HTML
CSS

Данный код делает веб-кнопку светящейся, стильной и яркой, с акцентом на HTML и CSS.

Начиная с HTML, всё довольно просто. У нас есть якорный тег с классом btn-glow btn-hover-shine, который представляет нашу кнопку на веб-странице. Простота HTML здесь обманчива, потому что настоящая магия происходит в CSS, где определяются визуальные аспекты кнопки.

Переходя к CSS, здесь наша кнопка получает свою индивидуальность. Класс .btn-glow создаёт начальный вид кнопки с градиентным фоном, делая её яркой. Цвет плавно переходит из одного оттенка в другой, создавая завораживающий эффект. Текст кнопки стилизован жирным шрифтом, прописными буквами и выровнен по центру, обеспечивая, чтобы не только фон привлекал взгляд, но и сообщение, которое он несёт. Но что действительно выделяет эту кнопку, так это её светящийся эффект, достигаемый за счёт анимации ключевых кадров, которые циклически корректируют тень кнопки, придавая ей пульсирующее свечение, кажется, оживляющее страницу.

Более того, класс .btn-hover-shine добавляет дополнительный уровень взаимодействия. Когда пользователь наводит курсор на кнопку, это запускает эффект перехода, который изменяет тень и яркость кнопки, делая её на момент ярче светящейся. Это взаимодействие не только делает кнопку более привлекательной, но и интуитивно направляет пользователей к её нажатию, улучшая пользовательский опыт на веб-сайте.

В сущности, это сочетание HTML и CSS демонстрирует, как несколько строк кода могут значительно улучшить визуальную привлекательность и интерактивность веб-элементов. «Светящаяся кнопка» является идеальным примером того, как творчество и технологии могут сливаться, создавая элементы, которые не только функциональны, но и доставляют удовольствие при взаимодействии.