در این پست به شما نحوه ایجاد افکت های شناور مختلف روی دکمه ها را نشان می دهم.
وقتی ماوس را روی آن قرار می دهیم، دکمه ها را از چپ به راست، از راست به چپ، از بالا به پایین، از پایین به بالا پر می کنیم.
ممکن است در بسیاری از وب‌سایت‌ها دیده باشید که وقتی روی دکمه‌ها یا هر عنصری قرار می‌گیرید، تغییر می‌کند یا جلوه‌هایی مانند رنگ پس‌زمینه، رنگ متن، اندازه فونت، کل عنصر و غیره تغییر یا حرکت می‌کند. بستگی به این دارد که کدام توسعه دهنده افکت شناور اضافه کرده باشد. در این پست وبلاگ می خواهیم چند یا 5 افکت شناور روی دکمه ها با استفاده از html و css ایجاد کنیم.
دمو و آموزش کامل افکت های شناور دکمه:
https://www.youtube.com/watch?v=1ouf3VoaxOM
جلوه های شناور دکمه CSS.
بنابراین، اول از همه من فایل index.html را ایجاد کردم. و تگ دکمه اضافه کردم و داخل آن تگ anchor اضافه کردم.
<!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>Document</title>
<style>
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button{
background-color: transparent;
padding: 0;
}
.button a{
font-size: 35px;
padding: 10px 20px;
text-decoration: none;
display: block;
color: #000;
transition: 0.2s;
}
.button a:hover{
color: #fff;
}
</style>
</head>
<body>
<button class="button" type="button">
<a href="#">Hover</a>
</button>
</body>
</html>
خروجی:
بنابراین، در اینجا یک دکمه ساده ایجاد شده است. همانطور که در تصویر بالا می بینید، من افکت های شناور را روی برچسب لنگر دکمه با رنگ سفید اضافه کرده ام، زیرا در ابتدا یک رنگ سیاه وجود دارد و من حاشیه را در دکمه حذف نکرده ام، فقط برای نشان دادن طول و عرض دکمه. بعدا حذفش میکنم
حالا بیایید افکت های شناور مختلف را به دکمه اضافه کنیم.
1.
بنابراین، برای افزودن افکت های شناور، تگ span را در داخل تگ دکمه و بعد از تگ لنگر اضافه کرده ام.
<!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>Document</title>
<style>
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button{
background-color: transparent;
border: none;
z-index: 1;
position: relative;
padding: 0;
}
.button a{
font-size: 35px;
padding: 10px 20px;
text-decoration: none;
display: block;
color: #000;
transition: 0.2s;
}
.button a:hover{
color: #fff;
}
span{
position: absolute;
width: 0%;
height: 100%;
background-color: blue;
top: 0;
left: 0;
z-index: -1;
transition: 0.2s;
}
.button:hover span{
width: 100%;
}
</style>
</head>
<body>
<button class="button" type="button">
<a href="#">Hover</a><span></span>
</button>
</body>
</html>
خروجی:
افکت شناور آماده است. تصویر بالا در هنگام شناور کردن، رنگ آبی را از راست به چپ پر می کند.
حالا بیایید یک افکت شناور دکمه css دیگر بسازیم.
2.
افکت‌هایی را که رنگ را از چپ به راست پر می‌کنند، نگه دارید.
<!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>Document</title>
<style>
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button{
background-color: transparent;
border: none;
z-index: 1;
position: relative;
padding: 0;
}
.button a{
font-size: 35px;
padding: 10px 20px;
text-decoration: none;
display: block;
color: #000;
transition: 0.2s;
}
.button a:hover{
color: #fff;
}
span{
position: absolute;
width: 0%;
height: 100%;
background-color: blue;
top: 0;
right: 0;
z-index: -1;
transition: 0.2s;
}
.button:hover span{
width: 100%;
}
</style>
</head>
<body>
<button class="button" type="button">
<a href="#">Hover</a><span></span>
</button>
</body>
</html>
خروجی:
افکت های شناور دکمه css که رنگ را از بالا به پایین پر می کند.
3.
<!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>Document</title>
<style>
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button{
background-color: transparent;
border: none;
z-index: 1;
position: relative;
padding: 0;
}
.button a{
font-size: 35px;
padding: 10px 20px;
text-decoration: none;
display: block;
color: #000;
transition: 0.2s;
}
.button a:hover{
color: #fff;
}
span{
position: absolute;
width: 100%;
height: 0%;
background-color: blue;
top: 0;
right: 0;
z-index: -1;
transition: 0.2s;
}
.button:hover span{
height: 100%;
}
</style>
</head>
<body>
<button class="button" type="button">
<a href="#">Hover</a><span></span>
</button>
</body>
</html>
خروجی:
افکت های شناور دکمه css که رنگ را از پایین به بالا پر می کند.
4.
اکنون برای ایجاد افکت شناور پرکننده از پایین به بالا، کافیست top:0 را به bottom:0 در ویژگی span tag css تغییر دهید.
خروجی:
دکمه css از چپ به راست جلوه های شناور را در پایین صفحه نمایش می دهد.
5.
<!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>Document</title>
<style>
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button{
background-color: transparent;
border: none;
z-index: 1;
position: relative;
padding: 0;
}
.button a{
font-size: 35px;
padding: 10px 20px;
text-decoration: none;
display: block;
color: #000;
transition: 1s;
}
span{
position: absolute;
width: 0%;
height: 10%;
background-color: blue;
bottom: 0;
left: 0;
z-index: -1;
transition: 1s;
}
.button:hover span{
width: 100%;
}
</style>
</head>
<body>
<button class="button" type="button">
<a href="#">Hover</a><span></span>
</button>
</body>
</html>
خروجی:
همانطور که در تصویر بالا می بینید. تصویر در وسط افکت شناور گرفته می شود. بنابراین، همانطور که می بینید هنگام شناور کردن، خط در عرض پایین از 0 تا 100٪ می رود.
به همین ترتیب، می توانید از راست به چپ بسازید. فقط تگ span را در ویژگی css از چپ:0 به راست:0 تغییر دهید.
همچنین ممکن است دوست داشته باشید:
بنابراین به این ترتیب می توانید افکت های شناور دکمه css را با استفاده از html و css ایجاد کنید. اگر سوال یا پیشنهادی دارید می توانید در قسمت نظرات بنویسید.
