Как анимировать текст кнопки с использованием только CSS
Сегодня мы добьемся того, что вы видите ниже:
По сути, мы бы анимировали текст кнопки, чтобы плавно скользить вверх и вниз и отображать другой текст при наведении на него курсора.
Без лишних слов, давайте начнем.
Шаг 1. Добавьте структуру html
Излишне говорить, что нам понадобятся два разных текстовых значения для кнопки.
Основной текст (New Blog) будет содержать текущую информацию, а скрытый текст (Read it now!) будет содержать значение, отображаемое при наведении курсора.
Вот код на данный момент:
<div class="btn blog-button">
<div class="primary text">New Blog</div>
<div class="secondary text">Read it now!</div>
</div>
.btn {
width: 200px;
height: 50px;
background-color: #0fabbc;
border-radius: 25px;
color:#fff;
font-size:18px;
font-weight:bold;
font-family: "Lucida Console", "Courier New", monospace;
}
Шаг 2: исходное состояние (без наведения)
Прямо сейчас оба текстовых значения уложены друг против друга в крошечном кнопочном блоке. Давайте используем свойство position, чтобы разделить их.
.btn {
width: 180px;
height: 45px;
background-color: #0d7377;
border-radius: 25px;
position: relative;
}
.text {
width: 180px;
height: 45px;
position: absolute;
}
.primary {
top: 0px;
}
.secondary {
top: 80px;
}
Когда вы используете position: absolute;, он позиционируется относительно ближайшего расположенного родителя. Если вы посмотрите на приведенный выше код и изображение, мы указали .btn относительную позицию и абсолютное позиционирование дочерних div.
Итак, теперь всякий раз, когда вы пытаетесь изменить положение дочерних элементов div, они будут перемещаться относительно .btn, а не body.
Шаг 3. Состояние при наведении курсора
Если вы посмотрите на приведенный выше код, вы заметите, что мы дали классу .secondary максимальное значение 80 пикселей. Это текст нашей кнопки, который будет отображаться при наведении курсора. При наведении курсора на кнопку верхнее свойство должно быть равно 0, чтобы оно находилось внутри поля кнопки.
Точно так же на этом этапе мы хотим, чтобы существующий текст («New Blog») освободил место для вторичного текста, поэтому мы переместим его вверх, установив верхнее значение -80 пикселей. Посмотрим на это в действии.
.btn:hover .primary {
top:-80px
}
.btn:hover .secondary {
top:0px
}
Но подождите, здесь чего-то не хватает?
О да, переход не выглядит очень плавным. Плюс почему другой текст все еще виден. Давай исправим.
Шаг 4. Добавьте немного анимации туда и сюда
Прямо сейчас, скольжение вверх и вниз происходит мгновенно. Давайте воспользуемся CSS свойством transition, чтобы контролировать скорость этого движения вверх / вниз.
Кроме того, пришло время избавиться от ненужного текста. Мы хотим показать только тот текст, который находится внутри поля кнопки с классом .btn, и поэтому мы будем использовать overflow:hidden, чтобы скрыть этот текст. Посмотрим на это в действии:
.btn {
overflow:hidden;
}
.text {
transition: top 0.7s;
-moz-transition: top 0.7s; // Firefox
-webkit-transition: top 0.7s; // Safari and Chrome
-o-transition: top 0.7s; // Opera
-ms-transition: top 0.7s; // Explorer
}
Приведенный выше фрагмент кода упрощен, чтобы показать только код, относящийся к этому разделу. Вы можете найти окончательный код ниже:
