برنامه نویسی
دکمه شناور متحرک فقط با استفاده از HTML CSS

دکمه با جلوه های شناور شگفت انگیز
در این وبلاگ قصد داریم یاد بگیریم “چگونه یک دکمه با افکت های شناور فقط با استفاده از HTML و CSS ایجاد کنیم.”
نکات قابل بحث
-
پیش نمایش
-
آموزش یوتیوب
-
کد HTML
-
کد CSS
-
منابع
پیش نمایش :
نسخه ی نمایشی زنده وب سایت را می توانید با کلیک بر روی اینجا مشاهده کنید.
آموزش یوتیوب:
https://www.youtube.com/watch?v=J5lw_kozJGY
کد HTML:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Sunglass Effect</title>
<link rel="stylesheet" href="https://dev.to/rutikkpatel/style.css">
</head>
<body>
<div class="main">
<h1>Button Hover Sunglass Effect</h1>
<button id="btn_1"> Hover Me !!</button>
<button id="btn_2"> Hover Me !!</button>
<button id="btn_3"> Hover Me !!</button>
<button id="btn_4"> Hover Me !!</button>
</div>
</body>
</html>
کد CSS:
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main{
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
/* Common CSS Code for all buttons */
button {
background: transparent;
font-size: 2.5rem;
padding: 1rem 0.5rem;
position: relative;
transition: all 0.5s linear;
}
button::before {
content: '';
position: absolute;
background-color: rgb(245, 86, 86);
transition: all 0.4s linear;
z-index: -1;
}
button:hover{
color: white;
}
/* Code According to effect */
/* btn_1 */
#btn_1::before{
width: 0%;
height: 100%;
top: 0;
left: 0;
}
#btn_1:hover::before{
width: 100%;
}
/* btn_2 */
#btn_2::before{
width: 0%;
height: 100%;
top: 0;
right: 0;
}
#btn_2:hover::before{
width: 100%;
}
/* btn_3 */
#btn_3::before{
width: 100%;
height: 0%;
top: 0;
right: 0;
}
#btn_3:hover::before{
height: 100%;
}
/* btn_4 */
#btn_4::before{
width: 100%;
height: 0%;
bottom: 0;
right: 0;
}
#btn_4:hover::before{
height: 100%;
}
منابع :
مخزن GitHub: https://github.com/rutikkpatel/HTML-CSS/tree/main/Button%20Hover%20Sunglass%20Effect