Кнопки применяются практически на всех сайтах. Предлагаю простую анимацию кнопки с помощью CSS3. Особенностью примера является возможность заменять текст на кнопки при наведении мыши.
HTML код выглядит очень просто – контейнер с классом .button, внутри которого лежат два элемента: параграф содержащий основной текст и блок div внутри которого содержится текст, который будет показан при наведении мыши. В начальном состоянии текст скрыт.
|
1 2 3 4 5 6 |
<div class="button"> <p>Текст на кнопке</p> <div class="shadow"> <span>Новый текст</span> </div> </div> |
Логика анимации проста – при наведении мыши на блок .button мы применяем стили ко вложенным элементам div и span. Также, мы скрываем содержимое параграфа, который содержит основной текст. Скрытие производится с помощью свойства opacity.
Обратите внимание, вложенный .shadow в начальном состоянии имеет ширину 0px. При наведении мыши, его ширина увеличивается до ширины родителя. Плавность изменения свойства обеспечивается строкой transition: all ease 2s.
Ну и полный код CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed); .button { font-family: 'Roboto Condensed', sans-serif; margin: 30px; background: #ee6123; width: 300px; height: 40px; border-radius: 5px; color: #fff; text-align: center; font-size: 18px; text-transform: uppercase; line-height: 40px; cursor: pointer; position: relative; overflow: hidden; } .button p { margin: 0; position: relative; transition: all ease 1s; } .shadow { position: absolute; top: 0; left: 0; height: 40px; width: 0; background: #205081; overflow:hidden; transition: all ease 2s; border-radius: 5px; } .shadow span { opacity:0; transition: all ease 3s; } .button:hover .shadow { width: 100%; } .button:hover p { opacity: 0; } .button:hover .shadow span { opacity: 1; } |
И, как обычно, примеры работы на codepen.
See the Pen Изменение текста и фона кнопки на CSS by Alex (@Asmodey) on CodePen.
Код как html, так и CSS можно упростить, уменьшить количество кода и элементов, но тогда он не будет таким гибким.
