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

Демо

2,44 КБ
HTML, CSS
Кнопка
анимация, отправить
Лицензия MIT

Код
Редактор

HTML

<div class="panel blue">
  <button>Отправить</button>
</div>

CSS

@import "https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext";
button {
    color: #9b51e0;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: #9b51e0;
    position: relative;
    margin: 1em;
    display: inline-block;
    padding: 0.5em 1em;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-align: center;
    font-family: comfortaa;
    font-weight: bold;
}
.panel * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button:before,
button:after {
    content: "";
    display: block;
    position: absolute;
    border-color: #9b51e0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-style: solid;
    width: 1em;
    height: 1em;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
button:before {
    top: -6px;
    left: -6px;
    border-width: 2px 0 0 2px;
    z-index: 5;
}
button:after {
    bottom: -6px;
    right: -6px;
    border-width: 0 2px 2px 0;
}
button:hover:before,
button:hover:after {
    width: -webkit-calc(100% + 12px);
    width: -moz-calc(100% + 12px);
    width: calc(100% + 12px);
    height: -webkit-calc(100% + 12px);
    height: -moz-calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #fff;
}
button:hover {
    background-color: #fff;
    border-color: #fff;
    cursor: pointer;
}
.blue button {
    color: #3bb4e5;
    border-color: #3bb4e5;
}
.blue button:before,
.blue button:after {
    border-color: #3bb4e5;
}
.blue button:hover:before,
.blue button:hover:after {
    width: -webkit-calc(100% + 12px);
    width: -moz-calc(100% + 12px);
    width: calc(100% + 12px);
    height: -webkit-calc(100% + 12px);
    height: -moz-calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #3bb4e5;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.blue button:hover {
    color: #3bb4e5;
    background-color: transparent;
    border-color: #3bb4e5;
}

HTML
CSS

Представьте, что вы создаёте веб-страницу и хотите добавить на неё кнопку, которая не только выглядит круто, но и реагирует на наведение курсора, добавляя изюминку в пользовательский опыт. Этот фрагмент кода делает именно это. Он использует HTML для структуры, CSS для стилизации и имеет место для JavaScript, вероятно, предназначенное для добавления функциональности позже.

Во-первых, есть кнопка, обернутая в элемент div с классом blue. Эта кнопка, когда её добавят на веб-страницу, будет простой и незамысловатой, с надписью «Отправить».

На самом деле магия происходит в CSS. Внешний вид кнопки настраивается с прозрачным фоном, твёрдой границей и определённой цветовой схемой, которая изменяется при наведении курсора. Эффект наведения особенно интересен, потому что он включает анимацию, которая расширяет границу визуально привлекательным способом. Это достигается за счёт псевдоэлементов :before и :after, которые создают дополнительные элементы на странице без необходимости добавления дополнительного HTML. Эти элементы абсолютно позиционированы относительно кнопки, и их размер изменяется при наведении, создавая анимированный эффект, который выглядит так, как будто кнопка динамически обрамляется.

Более того, CSS включает переходы, делая изменения внешнего вида плавными, а не резкими. Это обеспечивает более отполированный вид и ощущение. Код также использует переменные CSS и вычисления calc() для динамической корректировки размеров и позиций, обеспечивая консистентность анимации наведения независимо от размера кнопки.

Наконец, стилизация кнопки чувствительна к классу её родителя blue, что означает, что цветовую схему можно легко настроить, изменив класс контейнера. Это демонстрирует гибкий подход к стилизации, который может быть повторно использован с различными цветовыми схемами для разных частей веб-сайта.

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