Всем привет! Вы узнаете, как создать кнопку наведения с эффектом светящейся тени. его очень просто спроектировать, и я думаю, что он поможет вам при разработке привлекательных кнопок. Этот эффект тени будет работать при наведении курсора на кнопку. Давайте посмотрим, как создать эту кнопку с эффектом светящейся тени.
Для кнопки создайте тег привязки с именем класса «btn». Затем свяжите файл style.css с файлом index.html между тегами <head></head>, как показано в видео. Затем начните кодировать файл style.css. Напишите стили для тела, чтобы центрировать элемент. Затем напишите стили для кнопки, используя класс «btn». font-family, font-size, font-weight, background, width, padding, text-align, text-decoration, text-transform, color, border-radius, cursor, box-shadow, используя эти свойства. Затем стили наведения кнопки. Наведите курсор на кнопку, чтобы изменить тень блока и изменить масштаб кнопки. И включите продолжительность перехода в "btn" селектор, чтобы перевести наведение на время и добавить свойства перехода box-shadow, transform. Надеюсь, это видео поможет вам получить представление о дизайне привлекательных эффектов кнопок.
HTML КОД:
<a href="#" class="btn">Button</a>
CSS КОД:
/* ===== button css ===== */
.btn {
font-family: "Roboto", sans-serif;
font-size: 18px;
font-weight: bold;
background: #1E90FF;
display:inline-block;
width: 200px;
padding: 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #fff !important;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-transition-duration: 0.3s !important;
transition-duration: 0.3s !important;
-webkit-transition-property: box-shadow, transform !important;
transition-property: box-shadow, transform !important;
}
.btn:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.btn:active {
box-shadow: 0 3px 3px #575555 inset;
}
.jpg "Голая Хилари Дафф (Hilary Duff) для журнала WomenHealth")
0 Комментарии