SVG hover эффект для кнопки
Формат SVG дает новые возможности для рисования различных фигур и анимирования их. Сегодня мы рассмотрим SVG hover эффект на кнопку. Создадим внешний контейнер с классом button и внутри него поместим тег svg. Внутри парного тега svg будет располагаться тег rest, изображающий прямоугольник без заливки и с позиционированием от верхнего левого угла браузера.
<div class="button">
Hover Me
<svg width="150" height="75" viewBox="0 0 150 75" xmlns="http://www.w3.org/2000/svg">
<rect x='0' y='0' fill='none' width='150' height='75'/>
</svg>
</div>
//CSS
body {
background-color: #F5F5F5; /* цвет фона страницы */
font-family: sans-serif; /* название шрифта */
}
Стилизация кнопки
.button {
text-transform: uppercase; /* текст заглавными буквами */
width: 150px; /* ширина кнопки */
height: 75px; /* высота кнопки */
color: #bf360c; /* цвет текста */
text-align: center; /* текст по центру по горизонтали */
line-height: 75px; /* текст по центру по вертикали */
margin: 20px auto; /* внешние отступы у кнопки */
position: relative; /* относительное позиционирование */
cursor: pointer; /* курсор рука */
}
SVG располагает большим арсеналом CSS свойств, отвечающих за стиль контуров.
svg {
position: absolute;
position: relative; /* абсолютное позиционирование */
top: 0; /* привязка к верхнему углу */
left: 0; /* привязка к левому углу */
}
svg rect {
stroke: #bf360c; /* цвет контура прямоугольника */
stroke-width: 2; /* ширина контура прямоугольника */
transition: 0.8s; /* плавный переход между состояниями */
}
Эффект наведения
Переходим к самому главному. Мы хотим, чтобы при наведении на кнопку, увеличивалась ширина контуров прямоугольника. Кроме того, сплошной контур линии должен меняться на прерывистую линию. За это отвечает свойство stroke-dasharray. Первым параметром данного свойства мы указываем ширину линии, а вторым параметром промежуток между линиями.
svg rect {
stroke-dasharray: 20, 40;
}
Зададим изначально максимально длинную линию с нулевым промежутком у свойства stroke-dasharray.
svg rect {
stroke: #bf360c;
stroke-width: 2;
transition: 0.8s;
stroke-dasharray: 400, 0; /* эффект сплошной линии */
}
При наведении на кнопку вместо сплошной линии появляется пунктирная линия.
.button:hover svg rect {
stroke-width: 5;
stroke-dasharray: 35, 275; /* пунктир и промежуток */
stroke-dashoffset: 40; /* смещение пунктира */
}
Посмотрите пример на CodePen
Мир фронтенда очень велик и разнообразен и как не утонуть в потоке информации? И с чего вообще начать? Я рекомендую идти от простого к сложному и последовательно изучить все базовые возможности HTML и CSS, по моему видеокурсу "Верстка сайта с нуля 2.0".
-
Создано 07.06.2021 10:17:13
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.