8 هاور افکت دکمه که سایت شما را از این رو به آن رو می کند – سلام به رفیق رایا وردپرسی پر انرژیم! 😊 چطوری؟ امیدوارم که روزهات پر از لحظات خوش و خلاقیت باشه!
امروز با یه مقاله فوقالعاده برگشتم که قراره سایتت رو به یه سطح جدید از جذابیت برسونه! 🔥 تو این پست میخوام درباره هاور افکت دکمههای کال تو اکشن صحبت کنم. حتما با سایتهایی روبرو شدی که وقتی ماوس رو میبری روی دکمهها، یه چیزی توی دلت بهت میگه “وای، چقدر جالب!” 😲 مثلاً رنگ دکمه تغییر میکنه، یه افکت باحال ظاهر میشه، یا حتی دکمه انگار قراره بهت یه دنیای جدید نشون بده! 😍 اینها همون هاور افکتهایی هستن که سایتت رو خاص، جذاب و حرفهای میکنن.
خب، تو این مقاله قراره 8 نوع از این افکتهای جذاب رو بهت معرفی کنم که میتونی خیلی راحت با HTML و CSS پیادهسازی کنی و سایتت رو از یه سایت معمولی به یه سایت جذاب و شیک تبدیل کنی! 🚀
پس آماده باش که سایتت رو با این افکتهای جادویی به یه سطح جدید و هیجانانگیز برسونی!
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD
قبل از اینکه بریم سراغ اصل ماجرا، بد نیس یه توضیح کوچیک درباره هاور افکتها و دکمههای کال تو اکشن بدم، که بدونی دقیقاً دارم درباره چی صحبت میکنم! 😉
هاور افکت: جادوی پویا و جذاب کردن دکمه های سایت
هاور افکت، همونطور که از اسمش پیداست، افکتیه که وقتی ماوس رو میبری روی یه چیزی (مثل یه دکمه، تصویر یا لینک)، اون شیء یه تغییراتی میکنه. این تغییرات میتونه مثلاً رنگ عوض کردن، بزرگتر شدن، افکت انیمیشن، یا حتی یه حالت جدید پیدا کردن باشه. به طور کلی هدف اینه که وقتی کاربر ماوس رو میاره رو یه قسمت از صفحه، حس کنه که داره با یه چیزی خاص و جالب ارتباط برقرار میکنه. این کار باعث میشه سایت جذابتر و کاربرپسندتر و پویاتر بشه!
دکمههای کال تو اکشن: دعوت به اقدام با یه کلیک!
دکمههای کال تو اکشن (Call to Action) یا همون دکمههای فراخوانی، دکمههایی هستن که از کاربر میخوان یه کاری انجام بده. مثلاً میگه «ثبتنام کن»، «الان خرید کن» یا «بیشتر بخوان». این دکمهها به درد موقعیتهایی میخورن که میخواهی کاربر رو به انجام یه عمل خاص دعوت کنی. مثلاً تو یه سایت فروشگاهی، دکمهای که میگه «خرید کن»، یه دکمه کال تو اکشنه.
حالا وقتی این دکمهها رو با یه هاور افکت جذاب ترکیب میکنی، سایتت یه حالت حرفهایتر پیدا میکنه. یعنی وقتی کاربر ماوسش رو میاره روی دکمه، دکمه تغییر میکنه، رنگش عوض میشه، یا یه افکت جالب روش میاد که باعث میشه کاربر بیشتر ترغیب بشه روی اون دکمه کلیک کنه.
در نتیجه، ترکیب هاور افکتها با دکمههای کال تو اکشن، سایتت رو جذابتر، شیکتر و حرفهایتر میکنه. 🚀
👌هاور افکت های جذاب برای دکمه های سایت (hover effects for site buttons)
در ادامه به بررسی و معرفی 15 هاور افکت جذاب برای دکمه های سایت می پردازم با من تا پایان این مقاله همراه باشین 🙂
1- هاور افکت گسترش دایرهای (Circle Expansion Effect)
این هاور افکت به نام “Circle Expansion Effect” یا “افکت گسترش دایرهای” شناخته میشه. در این افکت، وقتی موس روی دکمه میره، یک دایره به رنگ آبی روشن از گوشه دکمه بیرون میاد و به سرعت بزرگ میشه. این افکت به دکمهها یه حس پویایی و جذابیت میده و توجه کاربر رو به خودش جلب میکنه.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
overflow: hidden;
transition: color 0.4s ease-in-out;
}
.button::before {
content: '';
z-index: -1;
position: absolute;
top: 100%;
right: 100%;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #3cefff;
transform-origin: center;
transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
transition: transform 0.45s ease-in-out;
}
.button:hover {
cursor: pointer;
color: #161616;
}
.button:hover::before {
transform: translate3d(50%, -50%, 0) scale3d(15, 15, 15);
}2- هاور افکت ژله ای (Jelly Button Effect)
این افکت به نام “Jelly Button Effect” یا “افکت دکمه ژلهای” شناخته میشه. 🤩
در این افکت، زمانی که ماوس روی دکمه قرار میگیره، دکمه یه حالت ارتجاعی و کششی پیدا میکنه که شبیه به حرکت ژله هست. این حرکت باعث میشه که دکمه یه سری تغییرات جذاب (مثل بزرگ شدن و کوچک شدن) داشته باشه که به سایت یه حس جالب و سرگرمکننده میده. این افکت معمولاً برای دکمههایی که میخواهیم کاربر رو جذب کنه و بیشتر به انجام عملی ترغیب کنه استفاده میشه.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
z-index: 1;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
}
.button:hover {
cursor: pointer;
animation: jelly 0.5s;
}
@keyframes jelly {
0%,
100% {
transform: scale(1, 1);
}
25% {
transform: scale(0.9, 1.1);
}
50% {
transform: scale(1.1, 0.9);
}
75% {
transform: scale(0.95, 1.05);
}
}3- هاور افکت نبض (Pulse Effect)
در این افکت، وقتی ماوس رو میبری روی دکمه، حاشیه دکمه شروع به بزرگ شدن میکنه و بعد به آرامی به حالت اولیه برمیگرده، انگار دکمه یه نبض داره که به صورت پالس تکرار میشه. این حرکت باعث میشه دکمه زنده و پویا به نظر بیاد و توجه کاربر رو جلب کنه.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
}
.button:hover {
cursor: pointer;
}
.button::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 4px solid hsl(236, 32%, 26%);
transform-origin: center;
transform: scale(1);
}
.button:hover::before {
transition: all 0.75s ease-in-out;
transform-origin: center;
transform: scale(1.75);
opacity: 0;
}4 – هاور افکت درخشش (Shine Effect)
در این افکت، وقتی ماوس رو میبری روی دکمه، یه نور درخشان شبیه به “برق زدن” از روی دکمه عبور میکنه و دکمه رو به طور جذابی درخشنده میکنه. این افکت باعث میشه که دکمه یه حس زنده و تابان پیدا کنه و توجه کاربر رو بیشتر جلب کنه.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
overflow: hidden;
cursor: pointer;
}
.button::after {
content: '';
z-index: -1;
background-color: hsla(0, 0%, 100%, 0.2);
position: absolute;
top: -50%;
bottom: -50%;
width: 1.25em;
transform: translate3d(-525%, 0, 0) rotate(35deg);
}
.button:hover::after {
transition: transform 0.55s ease-in-out;
transform: translate3d(700%, 0, 0) rotate(35deg);
}
5- هاور افکت اسلاید (Slide Effect)
این افکت یه حرکت اسلایدی برای دکمه ایجاد میکنه که وقتی ماوس رو روی دکمه میبری، یه پوشش رنگی از سمت چپ دکمه شروع به حرکت میکنه و به سمت راست گسترش پیدا میکنه تا کل دکمه رو در بر بگیره. این افکت حس یه حرکت نرم و مدرن به دکمه میده و باعث میشه دکمه جذابتر و پویا به نظر برسه.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
}
.button::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fc2f70;
transform-origin: center right;
transform: scaleX(0);
transition: transform 0.25s ease-in-out;
}
.button:hover {
cursor: pointer;
}
.button:hover::before {
transform-origin: center left;
transform: scaleX(1);
}6- هاور افکت جمع شدن حاشیه (Border Shrink Effect)
این افکت به دکمهها یه حرکت جالب میده. وقتی ماوس رو روی دکمه میبری، دو خط براکت مانند که اطراف دکمه هستن، به سمت وسط دکمه جمع میشن . یعنی مرزهای دکمه انگار دارن از دو طرف به داخل میرن.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
width: 10em;
position: relative;
height: 3.5em;
border: 3px ridge #149CEA;
outline: none;
background-color: transparent;
color: #149CEA;
transition: 1s;
border-radius: 0.3em;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.button::after {
content: "";
position: absolute;
top: -10px;
left: 3%;
width: 95%;
height: 40%;
background-color: #ffffff;
transition: 0.5s;
transform-origin: center;
}
.button::before {
content: "";
transform-origin: center;
position: absolute;
top: 80%;
left: 3%;
width: 95%;
height: 40%;
background-color: #ffffff;
transition: 0.5s;
}
.button:hover::before, .button:hover::after {
transform: scale(0);
}
.button:hover {
box-shadow: inset 0px 0px 25px #1479EA;
}7- هاور افکت حاشیهی رنگی با چرخش رنگ (Gradient Border with Hue Rotation Effect)
این هاور افکت مثل یه حلقه رنگی دور دکمه میچرخه. وقتی ماوس رو میاری روش، رنگها به طور هیجانانگیز شروع به چرخش میکنن و دکمه یه حالت زنده و پویا پیدا میکنه.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button">RayaWp</button>کد CSS:
.button {
border-radius: 15px;
--border-width: 4px;
appearance: none;
position: relative;
padding: 1em 2em;
border: 0;
background-color: #212121;
font-family: "Roboto", Arial, "Segoe UI", sans-serif;
font-size: 18px;
font-weight: 500;
color: #fff;
z-index: 2;
}
.button::after {
--m-i: linear-gradient(#000, #000);
--m-o: content-box, padding-box;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: var(--border-width);
border-radius: var(--border-radius);
background-image: conic-gradient(
#488cfb,
#29dbbc,
#ddf505,
#ff9f0e,
#e440bb,
#655adc,
#488cfb
);
-webkit-mask-image: var(--m-i), var(--m-i);
mask-image: var(--m-i), var(--m-i);
-webkit-mask-origin: var(--m-o);
mask-origin: var(--m-o);
-webkit-mask-clip: var(--m-o);
mask-composite: exclude;
-webkit-mask-composite: destination-out;
filter: hue-rotate(0);
animation: rotate-hue linear 500ms infinite;
animation-play-state: paused;
}
.button:hover::after {
animation-play-state: running;
}
@keyframes rotate-hue {
to {
filter: hue-rotate(1turn);
}
}
.button::after {
box-sizing: border-box;
}
.button:active {
--border-width: 5px;
}8- هاور افکت جابه جایی و سایه (Button Hover Translate and Shadow Effect)
این هاور افکت به این صورت کار میکنه که وقتی موس رو میبری روی دکمه، یک تغییر جالب میبینی: دکمه به سمت از بالا کمی به سمت پایین میره و این حسو به کاربر میده که دکمه به داخل صفحه میره هنگام هاور.
پیش نمایش دکمه: ( ماوس را روی دکمه زیر نگه دار)
کد HTML:
<button class="button"> <span>RayaWp</span> </button>کد CSS:
/* From Uiverse.io by Web-Potato */
button {
padding: 0.1em 0.25em;
width: 13em;
height: 4.2em;
background-color: #212121;
border: 0.08em solid #fff;
border-radius: 0.3em;
font-size: 12px;
cursor: pointer;
}
button span {
position: relative;
display: flex;
justify-content: center;
align-items: center;
bottom: 0.4em;
width: 8.25em;
height: 2.5em;
background-color: #212121;
border-radius: 0.2em;
font-size: 1.5em;
color: #fff;
border: 0.08em solid #fff;
box-shadow: 0 0.4em 0.1em 0.019em #fff;
}
button span:hover {
transition: all 0.5s;
transform: translate(0, 0.4em);
box-shadow: 0 0 0 0 #fff;
}
button span:not(hover) {
transition: all 1s;
}خب دوست عزیز! امیدوارم این 8 هاور افکت دکمه به دردت بخوره و بتونی ازش برای زیباتر کردن سایتت استفاده کنی. 😎✨ طراحی سایت همیشه میتونه با کمی خلاقیت و افکتهای جذاب، متفاوتتر بشه!
اگر سوالی داشتی یا تجربهای در مورد این افکتها داری که میخوای با ما به اشتراک بذاری، حتماً تو کامنتها بنویس. ما همیشه منتظر نظراتت هستیم! 💬💡
خیلی ممنون که وقت گذاشتی و مقاله رو خوندی. امیدوارم همیشه موفق و پرانرژی باشی! 🙌🚀
