<button class="radikalwp-btn-wave"><span>سفر کن<//span><//button>
.radikalwp-btn-wave {
position: relative;
padding: 13px 34px;
font-family: inherit;
font-size: 16px;
font-weight: 700;
color: #0369a1;
background: #f0f9ff;
border: 2px solid #0ea5e9;
border-radius: 999px;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
.radikalwp-btn-wave span { position: relative; z-index: 2; transition: color .3s ease .1s; }
.radikalwp-btn-wave::before {
content: '';
position: absolute;
bottom: -100%;
right: 0;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 70%, #38bdf8 25%, #0ea5e9 75%);
border-radius: 42%;
transition: bottom .6s ease;
z-index: 1;
}
.radikalwp-btn-wave:hover::before { bottom: -40%; }
.radikalwp-btn-wave:hover span { color: #fff; }
درباره این اسنیپت
موج آرام در پایین دکمه که هنگام هاور بالا میآید و کل دکمه را آبی میکند؛ الهام از آب و آرامش. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۴ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!