آموزش 5 مدل دکمه با استایل متفاوت فقط باHtml و Css

دکمه‌ها نقش مهمی در جذب توجه و جلب تعامل کاربر با وب سایت دارند. از آنها به عنوان عناصر کلیدی رابطه کاربر و اجرای اعمال مختلف مورد استفاده قرار می‌گیرند.

دکمه‌ها می‌توانند در نقاط مختلف وب سایت، از جمله صفحه اصلی یا فوتر، با طراحی‌های مختلف قرار گیرند.

در این مقاله که توسط تیم فنی و برنامه نویسی دیجیتایزر تهیه شده است به مثال‌هایی از دکمه‌های CSS با استایل‌های مختلف اشاره شده است که در وب سایت‌های شرکتی معمولاً از طراحی محتاط و در صنایع خلاق تر از دکمه‌های ظاهری و جذاب استفاده می‌شود.

توسعه‌دهندگان و طراحان وب ارزش بالایی برای افکت‌ها و انیمیشن‌های Hover یا Focus در دکمه‌ها قائل هستند. این افکت‌ها می‌توانند تجربه کاربر را بهبود بخشند و جذابیت بیشتری به دکمه‌ها اضافه کنند.

برای دیدن کدها و استفاده از استایل دکمه در وب سایت خود با ما در این مقاله دیجیتایزر همراه باشید.

1-دکمه شیشه ای

کد css دکمه

     .button3{
border: 1px #ffffff;
    display: block;
    background-color: rgba(256,256,256,0.3);
    width: 200px;
    height: 64px;
    border-radius: 10px;
    box-shadow: inset 0px 1px 20px 0px #fff, 2px 2px 2px #fff, 0px 0px 0px 0px #fff, 0px 1px 2px 2px #fff;
    overflow: hidden;
    z-index: 8;
}

.button3:hover {
  transform: scale(1.1);
}

.button3:active {
  transform: scale(1);
}

کد html دکمه

        <button class="button3">دکمه شیشه ای</button>

این دکمه از ترکیب سایه‌ها، تغییر اندازه نرم، و حالت هاور و کلیک برای ایجاد یک دکمه با اثرات جلب توجه استفاده می‌کند.

ویژگی های دکمه شیشه ای

این کد یک دکمه با افکت‌های سایه و تغییر اندازه به صورت نرم بر اساس وضعیت هاور و کلیک ایجاد می‌کند. در زیر توضیحات کلی در مورد نقاط کلیدی این کد آورده شده است:

1. استایل .button3:

- دارای حاشیه border با رنگ سفید تعریف شده است.

- پس‌زمینه دکمه با رنگ سفید و شفافیت طراحی شده است.

- دارای سایهbox-shadow) ) به صورت درونی و خارجی بر روی دکمه.

- با استفاده از border-radius، گوشه‌های گرد شده‌اند.

- از overflow: hidden برای مخفی کردن هر گونه محتوای اضافی خارج از مرز دکمه استفاده شده است.

- z-index: 8 برای تعیین اولویت این المان نسبت به دیگر المان‌ها در صفحه.

2. تغییرات هنگام هاور(hover)و کلیک (active)

- در هنگام هاور، اندکی بزرگ‌تر شده و انیمیشن با تابع scale اجرا می‌شود .

- در هنگام کلیک، به اندازه اصلی باز می‌گردد .

ویژگی‌های backdrop-filter و box-shadow: inset
backdrop-filter: برای ایجاد افکت شفافیت شیشه‌ای استفاده می‌شود.box-shadow: inset: به خوبی در مرورگرها پشتیبانی می‌شود.
مرورگرهای پشتیبانی کننده:
✔️بله	:Chrome
❌خیر (باید در تنظیمات فعال شود)	:Firefox
✔️بله	:Edge
✔️بله	:Safari
❌خیر	:Internet Explorer

2- دکمه ژله ای:

کد css دکمه

       .Btn {
position: relative;
width: 150px;
height: 55px;
border-radius: 45px;
border: none;
background-color: rgb(151, 95, 255);
color: white;
box-shadow: 0px 10px 10px rgb(210, 187, 253) inset,
0px 5px 10px rgba(5, 5, 5, 0.212),
0px -10px 10px rgb(124, 54, 255) inset;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.Btn::before {
width: 70%;
height: 2px;
position: absolute;
background-color: rgba(250, 250, 250, 0.678);
content: "";
filter: blur(1px);
top: 7px;
border-radius: 50%;
}

.Btn::after {
width: 70%;
height: 2px;
position: absolute;
background-color: rgba(250, 250, 250, 0.137);
content: "";
filter: blur(1px);
bottom: 7px;
border-radius: 50%;
}

.Btn:hover {
animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
0% {
transform: scale3d(1, 1, 1);
}

30% {
transform: scale3d(1.25, 0.75, 1);
}

40% {
transform: scale3d(0.75, 1.25, 1);
}

50% {
transform: scale3d(1.15, 0.85, 1);
}

65% {
transform: scale3d(0.95, 1.05, 1);
}

75% {
transform: scale3d(1.05, 0.95, 1);
}

100% {
transform: scale3d(1, 1, 1);
}
}

کد html دکمه

       <button class="Btn"> دکمه ژله ای</button>

این کد یک دکمه با نام دکمه ژله ای ایجاد می‌کند که دارای افکت ژله ای شدن در هنگام هاور شدن (زمانی که اشاره گر موس روی دکمه قرار گیرد اما کلیک نکند) است.

ویژگی‌های اصلی دکمه:

دکمه با نام کلاس Btn در HTML تعریف شده است.
دکمه شامل متن دکمه ژله ای است.
استایل‌های CSS به کلاس Btn اعمال شده‌اند تا شکل و حالت دکمه را تعیین کنند.
از انیمیشن با نام jello-horizontal برای ایجاد افکت ژله ای در حالت هاور استفاده شده است.

جزئیات این کد:

- از خاصیت‌های CSS مانند border-radius برای گوشه‌های گرد، box-shadow برای ایجاد افکت سایه و cursor: pointer برای نشان دادن اینکه دکمه قابل کلیک است، استفاده شده است.

- از دو المنت ::before و ::after برای ایجاد خطوط نمایان در دکمه استفاده شده است که به وسیله‌ی افکت blur و موقعیت دقیق، ژله ای در دکمه ایجاد می‌کنند.

- هنگامی که ماوس روی دکمه هاور می‌شود، انیمیشن با نام "jello-horizontal" اجرا می‌شود که باعث تغییر مقیاس دکمه به صورت ژله ای در زمان می‌شود و این اثر به نظر می‌رسد که دکمه مانند ژل تکان می‌خورد.

انیمیشن‌های CSS (@keyframes)
انیمیشن‌ها به طور کلی در مرورگرهای مدرن پشتیبانی می‌شوند، اما عملکرد و ظاهر آنها ممکن است متفاوت باشد.
مرورگرهای پشتیبانی کننده:
✔️بله	:Chrome
✔️بله	:Firefox
✔️بله	:Edge
✔️بله	:Safari
❌خیر(بیشتر انیمیشن‌ها پشتیبانی نمی‌شوند)	:Internet Explorer

3- دکمه شاین

کد css دکمه

       .button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background: linear-gradient(45deg, rgba(45,127,231,0.7595413165266106) 17%, rgba(64,186,228,0.11248249299719892) 56%, rgba(16,57,236,0.76) 83%);

  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.button:hover .icon {
  transform: translate(4px);
}

.button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%);
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

کد html دکمه

      <button class="button"> دکمه شاین</button>

این کد ترکیبی از انیمیشن‌ها، تنظیمات استایل، و افکت‌های جذاب است که دکمه را به یک المان تعاملی و زیبا تبدیل می‌کند، وقتی کاربر بر روی آن هاور می‌شود.

توضیحات کلی کد دکمه شاین

این کد یک دکمه با انیمیشن‌های جذاب با استفاده از CSS ایجاد می‌کند. در زیر توضیحات کلی در مورد نقاط کلیدی این کد آورده شده است:

1. استایل دکمه با کلاس button

- دکمه به شکل گرد با استفاده از border-radius طراحی شده است.

- دکمه دارای یک افکت سایه به وسیله box-shadow بر روی دکمه استفاده شده است.

- تغییرات نرم از حاشیه داخلی و خارجی padding-blockو padding-inline برای تنظیم اندازه دکمه می باشد.

- پس‌زمینه دکمه از گرادینت خطی با سه رنگ مختلف تشکیل شده است.

- در هنگام هاور، دکمه به وسیله transform: scale بزرگ‌تر می‌شود و حاشیه‌های آن رنگ متفاوتی می‌گیرد.

3. افکت نورانی یا شاین در قسمت (Before)

- یک لایه افکت شاین با استفاده از یک گرادینت خطی و انیمیشن shine به دکمه افزوده شده است.

- در هنگام هاور، این افکت به صورت بی‌پایان اجرا می‌شود و به دکمه نوری افزوده می‌شود.

4. انیمیشن‌ها:

- با استفاده از keyframes با نام shine انیمیشنی تعریف شده است که نور از سمت چپ به سمت راست حرکت می‌کند.

- با استفاده از کد animation در قسمت hover و before حرکت شاین از طرف به طرفی دیگر به صورت بی پایان با کد (infinite) ادامه دارد.

4- دکمه با استایل آبشاری

کد css دکمه

       .c-button {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
    width: 200px;
  height: 64px;
  padding: 0.9em 1.6em;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  border-radius:10px;
}

.c-button--gooey {
  color: #06c8d9;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 4px solid #06c8d9;
  border-radius: 0;
  position: relative;
  transition: all 700ms ease;
    border-radius:10px;
}

.c-button--gooey .c-button__blobs {
  height: 100%;
  filter: url(#goo);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
}

.c-button--gooey .c-button__blobs div {
  background-color: #06c8d9;
  width: 37%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(1.2) translateY(135%) translateZ(0);
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs div:nth-child(1) {
  left: -5%;
}

.c-button--gooey .c-button__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
}

.c-button--gooey .c-button__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
}

.c-button--gooey:hover {
  color: #fff;

}
.c-button--gooey:active {
  transform: scale(0.8);
}
.c-button--gooey:hover .c-button__blobs div {
  transform: scale(1.4) translateY(0) translateZ(0);
}

کد html دکمه

     <button class="c-button c-button--gooey">دکمه آبشاری
  <div class="c-button__blobs">
  <div></div>
  <div></div>
  <div></div>
  </div>
</button>

این کد یک دکمه با انیمیشن‌های جالب و افکت‌های gooey (نوعی افکت نرم و لطیف) با استفاده از CSS ایجاد می‌کند. در زیر توضیحات کلی در مورد نقاط کلیدی این کد آورده شده است:

توضیحات کلی دکمه با استایل آبشاری

1. استایل دکمه با کلاس c-button

- تنظیمات اصلی برای استایل دکمه شامل رنگ متن، وزن فونت، اندازه فونت، و موارد دیگر است.

- دکمه دارای حاشیه داخلی padding ، نشانگر موقعیت نشان‌دهی cursor: pointer و تعیین موقعیت نسبی position: relative است.

2. استایل دکمه با افکت gooey با کلاس c-button--gooey

- تغییراتی که در هنگام هاور روی دکمه اعمال می‌شوند.

- تغییرات رنگ متن، تغییر نوع متن به حروف بزرگ، و ایجاد حاشیه با رنگ وضوح بالا.

- استفاده از افکت gooey با ایجاد بلورهای متحرک که از اطراف دکمه شکل می‌گیرند.

3. افکت gooey (<div class="c-button__blobs">):

- این قسمت شامل سه بلور متحرک است که از اطراف دکمه با استفاده از افکت gooey شکل می‌گیرند.

- هر بلور دارای حرکت و اندازه‌های مختلف است که به صورت تدریجی اعمال می‌شوند.

4. استایل هر بلور، div های داخل (<div class="c-button__blobs">)

- تنظیمات مربوط به هر بلور از جمله رنگ، اندازه، شکل گرد، موقعیت اولیه و حرکات آنها.

- این بلورها با ایجاد افکت نورانی و افکت حرکت به سمت بالا شکل می‌گیرند.

5. تغییرات هنگام هاور و اکتیو

- در هنگام هاور، رنگ متن دکمه به سفید تغییر می‌کند .

- در هنگام کلیک بر روی دکمه، اندازه دکمه کوچک‌تر می‌شود .

6. ترتیب انیمیشن هنگام هاور

- هنگام هاور، بلورها به اندازه بزرگ‌تری از حالت اولیه خود می‌شوند و به سمت بالا حرکت می‌کنند.

ویژگی filter: url(#goo)( افکت Gooey)
این افکت تنها در مرورگرهایی که از SVG فیلتر پشتیبانی می‌کنند قابل اجرا است.
مرورگرهای پشتیبانی کننده:
✔️بله	:Chrome
✔️بله	:Firefox
✔️بله	:Edge
❌خیر (به صورت کامل پشتیبانی نمی‌شود)	:Safari
❌خیر (پشتیبانی نمی‌شود)	:Internet Explorer

💡نکته: برای استفاده در Safari، بهتر است از روش‌های جایگزین یا انیمیشن‌های ساده‌تر استفاده کنید.

ویژگی‌های جدید CSS مثل ()scale و ()translateZ
این ویژگی‌ها معمولاً در مرورگرهای مدرن پشتیبانی می‌شوند.
مرورگرهای پشتیبانی کننده:
✔️بله	:Chrome
✔️بله	:Firefox
✔️بله	:Edge
✔️بله	:Safari
❌خیر (پشتیبانی محدود)	:Internet Explorer

5- دکمه طلایی

کد css دکمه

        .container {
  transition: 200ms ease;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 40px;
  border-width: 0;
  border-radius: 1em;
  background-color: #19171C;
  transition: 500ms ease;
}

.button p {
  font-size: 20px;
  font-weight: bold;
  background: rgb(137,60,21);
  background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button::before {
  position: absolute;
  content: '';
  width: 190px;
  height: 55px;
  border-radius: 1em;
  background-size: 100%;
  background: rgb(137,60,21);
  background: linear-gradient(90deg, rgba(137,60,21,1) 0%, rgba(255,222,68,1) 17%, rgba(177,116,30,1) 24%, rgba(255,231,82,1) 40%, rgba(224,147,38,1) 50%, rgba(228,150,42,1) 59%, rgba(176,120,27,1) 70%, rgba(239,179,51,1) 85%, rgba(135,58,26,1) 100%);
  z-index: -1;
}

.container:hover .button::before {
  animation: golden 5s infinite alternate ease-in-out;
}

.container:hover .button p {
  animation: golden 5s infinite alternate ease-in-out;
}

.container:hover {
  transform: scale(1.1);
}

.container:active {
  transform: scale(1);
}

.container:active .button::before {
  animation: golden 1s infinite alternate ease-in-out;
}

.container:active .button p {
  animation: golden 1s infinite alternate ease-in-out;
}

@keyframes golden {
  0% {
    background-size: 100%;
    background-position: 50%;
  }

  50% {
    background-size: 500%;
    background-position: 0%;
  }

  100% {
    background-size: 200%;
    background-position: 100%;
  }
}

کد html دکمه

      <body>
<div class="container">
  <button class="button">
    <p>کلیــــــک کنید</p>
  </button>
</div>

توضیحات کلی دکمه طلایی

این کد یک دکمه با افکت‌های جالب و متحرک با استفاده از CSS ایجاد می‌کند. در زیر توضیحات کلی در مورد نقاط کلیدی این کد آورده شده است:

1. اتایل container

- دارای یک انتقال حرکتی (transition ) با مدت زمان 200 میلی‌ثانیه به صورت نرم و ظریف است.

- در هنگام هاور، به وسیله (scale) اندکی بزرگ‌تر می‌شود.

2. استایل button

- دکمه با استفاده از flexbox به وسیله display: flex و تنظیمات مختلف برای ظاهر دکمه طراحی شده است.

- دارای یک انتقال transition با مدت زمان 500 میلی‌ثانیه به صورت نرم.

- متن داخل دکمه به وسیله یک گرادیان رنگی با افکت text fill طراحی شده است.

- یک عنصر ::before به عنوان پس‌زمینه با گرادینت با افکت نورانی افزوده شده است.

3. انیمیشن keyframes golden:

- این انیمیشن یک تغییر سایز و مکان پس‌زمینه با گرادینت را در هر چرخه اجرا می‌کند.

- از background-size و background-position برای ایجاد افکت جذاب استفاده شده است.

تغییرات هنگام هاور (hover) و کلیک (active)

- در هنگام هاور، اندکی بزرگ‌تر شده و انیمیشن با تابع golden اجرا می‌شود.

- در هنگام کلیک، اندکی کوچک‌تر شده و انیمیشن با تابع golden با سرعت کمتر اجرا می‌شود.

5. استایل متن دکمه

- متن دکمه با حاشیه‌ها و فونت 20 پیکسل و با بک گراند گرادینت طلایی شده است.

6. تغییرات هنگام هاور و کلیک بر روی متن دکمه:

- در هنگام هاور و کلیک، انیمیشن با تابع golden اجرا می‌شود.

ویژگی ;background-clip: text (افکت گرادیان روی متن)
این ویژگی نیاز به پیشوند -webkit- در اکثر مرورگرها دارد.
مرورگرهای پشتیبانی کننده:
✔️بله با (-webkit-)	:Chrome
❌خیر (بدون پشتیبانی)	:Firefox
✔️بله	:Edge
✔️بله با (-webkit-)	:Safari
❌خیر	:Internet Explorer

پیشنهاد برای سازگاری:

استفاده از پیشوندها -webkit-، -moz-، -ms- برای ویژگی‌های CSS خاص.

آزمایش در مرورگرهای مختلف قبل از انتشار.

استفاده از ابزارهایی مانند Autoprefixer برای اضافه کردن پیشوندها به صورت خودکار.

ارائه یک نسخه ساده‌تر از استایل‌ها برای مرورگرهای قدیمی مانند Internet Explorer.

اگر به طور خاص نیاز به پشتیبانی مرورگرهای قدیمی دارید، باید از افکت‌های ساده‌تر و سازگارتر استفاده کنید.

سوالات متداول

چگونه می‌توانم دکمه‌ای با افکت شیشه‌ای در وب‌سایت خود ایجاد کنم؟

برای ایجاد دکمه شیشه‌ای، باید از ترکیب سایه‌ها، تغییر اندازه نرم و حالت‌هاور استفاده کنید. می‌توانید از خاصیت box-shadow برای ایجاد سایه داخلی و خارجی، border-radius برای گرد کردن گوشه‌ها و scale برای تغییر اندازه دکمه در حالت هاور بهره بگیرید.

دکمه ژله‌ای چیست و چگونه می‌توانم آن را پیاده‌سازی کنم؟

دکمه ژله‌ای یک دکمه با افکت خاصی است که در حالت هاور، ظاهر آن به حالت انعطاف‌پذیر و شبیه به ژل تغییر می‌کند. این افکت معمولاً با استفاده از انیمیشن CSS و @keyframes ایجاد می‌شود که دکمه را در حالت هاور تغییر شکل می‌دهد.

چگونه می‌توانم افکت نورانی یا شاین را به دکمه‌های وب‌سایتم اضافه کنم؟

برای ایجاد افکت شاین، می‌توانید از linear-gradient برای پس‌زمینه دکمه و انیمیشن @keyframes برای حرکت نورانی از یک سمت به سمت دیگر استفاده کنید. این افکت در حالت هاور اجرا شده و جلوه‌ی بصری زیبایی به دکمه می‌بخشد.

افکت gooey در دکمه آبشاری به چه معناست و چگونه می‌توان آن را پیاده‌سازی کرد؟

افکت gooey (نرم و لطیف) با استفاده از سایه‌ها و حرکت بلورها اطراف دکمه ایجاد می‌شود. برای این افکت باید از عناصر ::before و ::after در CSS استفاده کنید تا بلورهای کوچک و متحرکی را بسازید که در اطراف دکمه حرکت می‌کنند.

چگونه می‌توانم یک دکمه طلایی با افکت گرادینت بسازم؟

دکمه طلایی را می‌توانید با استفاده از گرادینت خطی و background-size و background-position ایجاد کنید. همچنین می‌توانید یک انیمیشن برای تغییرات در پس‌زمینه دکمه اضافه کنید که باعث می‌شود افکت گرادینت طلایی به‌طور مداوم تغییر کند.

افکت‌های هاور در دکمه‌ها چه مزایایی دارند و چگونه می‌توانند تجربه کاربری را بهبود بخشند؟

افکت‌های هاور به کاربران نشان می‌دهند که یک عنصر تعاملی است و آماده کلیک کردن است. این افکت‌ها به جلب توجه کاربر کمک می‌کنند و تجربه کاربری را با اضافه کردن جلوه‌های بصری و ایجاد احساس تعاملی بودن سایت بهبود می‌بخشند.

آموزش 5 مدل دکمه با استایل متفاوت فقط باHtml و Css

1-دکمه شیشه ای

ویژگی های دکمه شیشه ای

1. استایل .button3:

2. تغییرات هنگام هاور(hover)و کلیک (active)

2- دکمه ژله ای:

ویژگی‌های اصلی دکمه:

جزئیات این کد:

3- دکمه شاین

توضیحات کلی کد دکمه شاین

1. استایل دکمه با کلاس button

3. افکت نورانی یا شاین در قسمت (Before)

4. انیمیشن‌ها:

4- دکمه با استایل آبشاری

توضیحات کلی دکمه با استایل آبشاری

1. استایل دکمه با کلاس c-button

2. استایل دکمه با افکت gooey با کلاس c-button--gooey

3. افکت gooey (<div class="c-button__blobs">):

4. استایل هر بلور، div های داخل (<div class="c-button__blobs">)

5. تغییرات هنگام هاور و اکتیو

6. ترتیب انیمیشن هنگام هاور

5- دکمه طلایی

توضیحات کلی دکمه طلایی

1. اتایل container

2. استایل button

3. انیمیشن keyframes golden:

5. استایل متن دکمه

6. تغییرات هنگام هاور و کلیک بر روی متن دکمه:

پیشنهاد برای سازگاری:

مقالات مشابه

انتقال وب سایت وردپرسی از لوکال هاست به هاست اصلی