Сегодня в этом блоге вы узнаете, как создать эффект сияния кнопок при наведении курсора с помощью HTML и CSS. Как правило, кнопка — это фундаментальный элемент пользовательского интерфейса, который сильно влияет на дизайн вашего взаимодействия на веб-сайте между посетителями или пользователями. Кнопки способны заставить пользователей действовать.
Как вы можете видеть на изображении, есть две кнопки CSS. Эти кнопки действительно привлекательны. В основном, сначала эти кнопки находятся в начальной стадии, где нет эффекта сияния. Но когда вы наводите курсор на определенную кнопку, цвет фона кнопки заполняется цветом их границы, а прохладный сияющий эффект наведения перемещается с левой стороны кнопки на правую.
Пример:
Я полагаю, вам нравится эта кнопка и ее сияющий эффект наведения. Вы можете легко использовать эту кнопку в своем проекте, на сайтах и где угодно. И вы можете вывести эту кнопку на новый уровень с помощью своего творчества.
Если вам нравится эта программа (эффект сияния кнопок) и вы хотите получить коды этого. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Кнопки CSS с сияющим эффектом наведения [исходные коды]
Для создания этой программы (Buttons Shining Hover Effect). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Button Shining Hover Effect | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button>Hover Me</button>
<button>Hover Me</button>
</div>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #0d0d0d;
}
button{
position: relative;
height: 65px;
width: 210px;
margin: 0 40px;
font-size: 23px;
font-weight: 500;
letter-spacing: 1px;
border-radius: 5px;
text-transform: uppercase;
border: 1px solid transparent;
outline: none;
cursor: pointer;
background: #0d0d0d;
overflow: hidden;
transition: 0.6s;
}
button:first-child{
color: #206592;
border-color: #206592;
}
button:last-child{
color: #ce5c0c;
border-color: #ce5c0c;
}
button:before, button:after{
position: absolute;
content: '';
left: 0;
top: 0;
height: 100%;
filter: blur(30px);
opacity: 0.4;
transition: 0.6s;
}
button:before{
width: 60px;
background: rgba(255,255,255,0.6);
transform: translateX(-130px) skewX(-45deg);
}
button:after{
width: 30px;
background: rgba(255,255,255,0.6);
transform: translateX(-130px) skewX(-45deg);
}
button:hover:before,
button:hover:after{
opacity: 0.6;
transform: translateX(320px) skewX(-45deg);
}
button:hover{
color: #f2f2f2;
}
button:hover:first-child{
background: #206592;
}
button:hover:last-child{
background: #ce5c0c;
}
Вот и все, теперь вы успешно создали эффект сияющей кнопки при наведении с помощью HTML и CSS. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.