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

Демо

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

Код
Редактор

HTML

<div class="panel">
  <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;
}

HTML
CSS

Представьте, вы создаёте веб-сайт и хотите сделать крутую, анимированную кнопку отправки, которая привлекает внимание. Вы начинаете с простой кнопки в панели. Сейчас она скромная, но вы собираетесь придать ей шарма с помощью волшебства CSS!

Сначала вы импортируете изысканный шрифт с Google Fonts, потому что хотите, чтобы текст вашей кнопки выглядел гладким и привлекательным. Затем вы приступаете к стилизации кнопки. Вы делаете её границу и текст прекрасного пурпурного цвета, но оставляете фон прозрачным для современного вида. Кнопка аккуратно позиционируется с помощью отступов, чтобы не выглядеть слишком тесной или слишком редкой.

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

Эти анимации не просто для красоты; они разработаны для того, чтобы сделать кнопку более интерактивной и привлекательной, побуждая пользователей нажимать. И самое лучшее? Эта стильная кнопка полностью на CSS, что значит, она загружается быстро и работает плавно на разных браузерах и устройствах.

Добавив эти элементы, вы превратили базовую HTML-кнопку в стильную, анимированную кнопку отправки, которая не только выглядит отлично, но и улучшает пользовательский опыт на вашем веб-сайте.