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

Демо

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

Код
Редактор

HTML

<div class="panel pink">
  <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 {
    color: #353535;
    background-color: #fff;
    border-color: #fff;
    cursor: pointer;
}
.pink button {
    color: #eb1777;
    border-color: #eb1777;
}
.pink button:before,
.pink button:after {
    border-color: #eb1777;
}
.pink button:hover:before,
.pink button:hover:after {
    border-color: #eb1777;
}
.pink button:hover {
    color: #fff;
    background-color: #eb1777;
    border-color: #eb1777;
}
.pink .panel {
    max-width: 960px;
    text-align: center;
    position: relative;
    margin: auto;
}

HTML
CSS

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

Во-первых, у нас есть кнопка, которая расположена на розовом фоне. Это как установка сцены для нашей главной звезды. Кнопка изначально привлекает внимание своим цветом и границей, выделяясь на фоне.

Теперь самое волшебное. Мы не просто довольствуемся красивой кнопкой; мы хотим, чтобы она была живой! Когда вы наводите на неё курсор, она не просто сидит на месте; она преображается. Границы анимируются, расширяясь наружу, будто кнопка оживает, приглашая вас нажать на неё. Это не просто анимация; это тщательно продуманный танец, при котором границы меняют цвет и расширяются плавным и привлекательным способом.

Но то, что действительно делает эту кнопку особенной, так это её стиль. Мы выбрали шрифт, который приятен для глаз, делая анимированную кнопку не только визуально привлекательной, но и притягательной. Цвета меняются при наведении, переходя от отчетливого розового к белому с розовым фоном, создавая поразительный контраст, который трудно не заметить.

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