برنامه نویسی

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

دکمه با جلوه های شناور شگفت انگیز

در این وبلاگ قصد داریم یاد بگیریم “چگونه یک دکمه با افکت های شناور فقط با استفاده از HTML و CSS ایجاد کنیم.”

خلق شده توسط [Rutik Patel](https://youtu.be/N5racZCWCoY)

نکات قابل بحث

  • پیش نمایش

  • آموزش یوتیوب

  • کد 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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا