Всем привет! Вы узнаете, как создавать красочные кнопки наведения для семантических целей (основной, успех, опасность, предупреждение) с помощью CSS box-shadow. Вы можете легко использовать эти кнопки на своем веб-сайте в зависимости от назначения кнопок. Давайте посмотрим, как создать эти красочные кнопки при наведении курсора.
Сначала создайте файл index.html и файл style.css. После того, как вы создали эти два файла, запустите HTML-часть кнопок в файле index.html, как показано на видео. После того, как вы закончите HTML-часть кнопок, свяжите файл style.css с файлом index.html. Затем перейдите к файлу style.css и завершите стилизацию кнопок, как показано на видео. Надеюсь, это видео будет вам полезно при разработке кнопок для веб-сайта.
Пример:
HTML КОД:
<!--button area start-->
<button class="btn-color btn-primary-color">Primary</button>
<button class="btn-color btn-success-color">Success</button>
<button class="btn-color btn-danger-color">Danger</button>
<button class="btn-color btn-warning-color">Warning</button>
<!--button area end-->
{codeBox}
CSS КОД:
.btn-color {
max-width:200px;
color: #fff;
border: none;
margin: 20px;
padding: 20px 30px;
font-size: 15px;
font-weight: 600;
display:inline-block;
text-transform: uppercase;
letter-spacing: 4px;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;
transition-property: box-shadow;
}
.btn-primary-color{
background: #50A7FF;
box-shadow: 0 0 25px #50A7FF;
}
.btn-primary-color:hover{
box-shadow: 0 0 5px #50A7FF,
0 0 25px #50A7FF,
0 0 50px #50A7FF,
0 0 100px #50A7FF;
}
.btn-success-color{
background: #03D29F;
box-shadow: 0 0 25px #03D29F;
}
.btn-success-color:hover{
box-shadow: 0 0 5px #03D29F,
0 0 25px #03D29F,
0 0 50px #03D29F,
0 0 100px #03D29F;
}
.btn-danger-color{
background: #FF7675;
box-shadow: 0 0 25px #FF7675;
}
.btn-danger-color:hover{
box-shadow: 0 0 5px #FF7675,
0 0 25px #FF7675,
0 0 50px #FF7675,
0 0 100px #FF7675;
}
.btn-warning-color{
background: #F0DF51;
box-shadow: 0 0 25px #F0DF51;
}
.btn-warning-color:hover{
box-shadow: 0 0 5px #F0DF51,
0 0 25px #F0DF51,
0 0 50px #F0DF51,
0 0 100px #F0DF51;
} {codeBox}