Всем привет! Вы узнаете, как создать кнопку наведения с эффектом светящейся тени. его очень просто спроектировать, и я думаю, что он поможет вам при разработке привлекательных кнопок. Этот эффект тени будет работать при наведении курсора на кнопку. Давайте посмотрим, как создать эту кнопку с эффектом светящейся тени.
Для кнопки создайте тег привязки с именем класса «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-shadow">Button</a>{codeBox}
CSS КОД:
/*button css*/
.btn-shadow{
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-shadow:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.btn-shadow:active {
box-shadow: 0 3px 3px #575555 inset;
} {codeBox}