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

Демо

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

Код
Редактор

HTML

<div class="panel borderless">
  <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 {
    cursor: pointer;
}
.borderless button {
    border-color: rgba(0, 0, 0, 0);
    color: #3071a5;
}
.borderless button:hover {
    border-color: #4ba9f3;
    background-color: transparent;
    color: #4ba9f3;
}
.borderless button:before,
.borderless button:after {
    border-color: transparent;
}
.borderless button:hover:before,
.borderless 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: #4ba9f3;
}

HTML
CSS

Давайте разберемся, как сделать кнопку на сайте не только функциональной, но и стильной, добавив в нее элементы интерактивности. Представим, что мы работаем над кнопкой «Отправить». Сначала мы делаем ее дизайн простым, но элегантным: добавляем границу и приятный оттенок фиолетового. А теперь самое интересное: когда вы наводите на кнопку курсор, она оживает. Мы добавляем мелкие анимированные детали по углам, заставляя кнопку казаться готовой к действию. Это не просто анимация; это тонкое расширение, которое привлекает внимание и добавляет уровень взаимодействия, не будучи слишком навязчивым.

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

Интересно, как несколько строк CSS могут значительно изменить взаимодействие пользователей со страницей. Это яркий пример того, как вдумчивый дизайн создает запоминающийся пользовательский опыт. Так что, в следующий раз, заметив на сайте кнопку, которая «танцует» под вашим курсором, помните, что за этим стоит целый мир творчества и размышлений.