کتابخانه کامپوننتها
☰
خانه
کامپوننتها
درباره
همه دستهها
تغییر حالت
دکمه
فرم
پترن
چک باکس
کارت
🔍
دکمه طلایی
دسته: دکمه | تگها: —
HTML
CSS
Prompt
<button class="button"> ارسال </button>
کپی
.button { cursor: pointer; position: relative; padding: 10px 24px; font-size: 18px; color: rgb(193, 163, 98); border: 2px solid rgb(193, 163, 98); border-radius: 34px; background-color: transparent; font-weight: 600; transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); overflow: hidden; } .button::before { content: ''; position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: inherit; scale: 0; z-index: -1; background-color: rgb(193, 163, 98); transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); } .button:hover::before { scale: 3; } .button:hover { color: #212121; scale: 1.1; box-shadow: 0 0px 20px rgba(193, 163, 98,0.4); } .button:active { scale: 1; }
کپی
یک دکمه شیک و مینیمال با متن "Subscribe" بساز که فقط با HTML و CSS داخلی نوشته شود. ویژگیها: - رنگ متن و بوردر طلایی (rgb(193,163,98)) - پسزمینه شفاف - گوشههای گرد (border-radius: 34px) - افکت هاور: پسزمینه طلایی شود، متن تیره (#212121) و کمی بزرگتر (scale 1.1) همراه با سایه - افکت کلیک: دکمه به حالت اولیه برگردد - از transition نرم با cubic-bezier استفاده کن - همه استایلها داخل تگ <style> در همان فایل HTML باشند (بدون فایل خارجی)
کپی