Здесь вы увидите долгое описание того, как я создавал эту небольшую кнопку. Будет множество пояснений для новичков, которые могут показаться вам бесполезными. Но как показывает практика, даже верстальщики с опытом в 1 год, не знают многих базовых вещей.
П.с. в связи с тем, что Яндекс.дзен автоматически применяет хёштеги, формат записи цвета будет в rgb.
Листай в самый низ, если скучно (там код) =)
Голый HTML
Для начала зададим фону приятный цвет, который будет гармонично смотреться с кнопкой и эффектом наведения. Я выбрал rgb(34, 34, 34)
Создадим саму кнопку <button>ПРОСТО КНОПКА</button>
Далее приступаем к выравниванию. Т.к кнопка является блочным (display: block) элементом, то выравнивание выполним с помощью margin-left: auto и margin-right: auto
Добавим стиля
Теперь наведем красоту, чтобы кнопка смотрелась приятно.
Сперва сделаем прозрачный фон у кнопки, за это отвечает свойство background со значением transparent (англ. прозрачный). Добавим границу кнопки: border: 1px solid rgb(46, 46, 46). В отличии от outline, свойство border увеличивает размер кнопки и другие элементы будут менять своё положение на странице.
Далее зададим внутренние отступы для кнопки св-вом padding, я выбрал 15px с каждой из сторон. Запись padding: 15px 15px 15px 15px равнозначна записи padding: 15px
Теперь приступаем к анимации. Пусть она срабатывает при наведении. За это отвечает псевдокласс hover
Пишем button:hover { /* тут будет наш css код */ } Заменим цвет кнопки и границы на белый. { border-color: rgb(255,255,255); color: rgb(255,255,255); } Все как-то резко, выглядит не очень!
Эту проблему решает свойство transition, которое до сих пор является эксперементальным и не поддерживается "древними" браузерами, а также китайскими супер скоростными браузерами (с экономией трафика). Но мы стараемся не для них! Поэтому пишем в css для button (не hover): { transition: 0.3s }
Теперь все красиво =)
Создаем блестяшку
Но нам этого мало, добавим красивую блестяшку. Которую мы создадим с помощью псевдоэлемента (типа элемент div, но псевдо) before.
Для создание псевдоэлемента необходимо указать, какой контент он содержит, в данном случае у нас ничего, но это нужно указать content:'';
Далее приступаем к стилизации псевдоэлемента:
- Зададим цвет фона background: rgb(255,255,255);
- Объявим абсолютное позиционирование, чтобы не другие элементы игнорировали его и его поведение position: absolute;
- Теперь зададим ширину и высоту. Я выбрал width: 200px; height: 100px;
Получилась ерунда, во-первых непонятно где находится, во-вторых большая и в-третьих непонятно как будет работать.
Решаем каждую проблему по очереди:
- Местоположение нужно задать явное. Записываем в стиль псевдоэлемента top:0; left: 0; Тем самым указав отступы от верхней и нижней границ, но элемент убежал (скорей всего). Это все потому, что у кнопки (button, не button::before) по умолчанию стоит position: static; Это значит, что дочерние элементы не будут ориентироваться на границы данного элемента. Поэтому задаем position: relative; Теперь наш псевдоэлемент будет ориентироваться на границы своего родителя (button).
- Большой размер, это необходимость, дабы псевдоэлемент занимал всё пространство по вертикали и границ не было видно, указываем элементу свойство overflow: hidden; (не работает, если position: static;) тем самым дочерние элементы не будут видны за пределами элемента.
Двигаем в пространстве
Настало самое интересное! Разберем, как перемещать псевдоэлемент, чтобы это было похоже на блеск, а не просто передвигающийся прямоугольник. Свойство transform прекрасно решает задачу т.к. позволяет описать поведение по трем координатам (x,y,z). Приступаем, первое значение для свойства tranform, будет translate. Им опишем начальную позицию по двум осям transform: translate(-120%,-50px);
Теперь сдвинем наш псевдоэлемент влево, для этого добавим в наш css код следующую строку button:hover::before { /* тут будет наш код */ }. Куда запишем финальную позицию для before transform: translate(120%,-100px);
Наводим на кнопку и... ничего не работает. Все правильно, ведь мы задали параметр transition только элементу, а нужно ещё задать для псевдоэлемента. Возвращаемся к button::before и записываем transition: all 1.1s cubic-bezier(0.19,1,.22,1); Где all - какому свойству задавать длительность перехода, 1.1s - время перехода, а cubic-bezier(0.19,1,.22,1)... если по-простому, то координаты для линии времени (без этого свойства она ровная) - первые 80% времени стремительно набирает скорость, а оставшиеся 20% идет спад.
Добавим вращения! Берем стартовое состояние псевдоэлемента (button::before) в свойство transform добавляем rotate(45deg) - вращение по своей оси на 45 градусов. Получается transform: translate(-120%,-50px) rotate(45deg); И в конечное состояние (button:hover::before) rotate(90deg).
Напоследок изменим transition у button на border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1);
Вот и готова кнопка!!! Поздравляю, вы прочли очень много текста, надеюсь вам было полезно. Ниже приведен исходный код css.
body {
background: # 222;
}
button {
display: block;
margin: auto;
position: relative;
background: transparent;
border: 1px solid # 2e2e2e;
text-transform: uppercase;
letter-spacing: .3rem;
padding: 15px 15px;
color: # 969696;
cursor: pointer;
overflow: hidden;
-webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
}
.button:hover .mask {
-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}
button::before {
content: '';
background: # fff;
position: absolute;
display: block;
width: 200px;
height: 100px;
-webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
-webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}
button:hover {
border-color: # fff;
color: # fff
}
button:hover::before {
-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}
Продолжение следует!