دکمه های CSS

دکمه های CSS به دکمه های HTML مدل داده شده ای گفته می شود که توسعه دهندگان برای مطابقت با طراحی وب سایت خود سفارشی می کنند. وقتی دکمه ها وارد حالت های مختلف می شوند می توانید رنگ ها ، اندازه متن ، پدینگ را تغییر دهید و حتی ویژگی های حالت را تغییر دهید.

ایجاد و حالت دادن دکمه ها

HTML دکمه هایی را ایجاد می کند اما CSS آن ها را سبک می کند.

دکمه های CSS می توانند از نظر اندازه ، رنگ ، سبک و غیره متفاوت باشند. دکمه های CSS اغلب با زمینه های ورودی برای ارسال اطلاعات توسط کاربران هستند.

دکمه های مرکز

ممکن است در CSS با مرکز کردن دکمه ها با مشکلاتی روبرو شوید. یک گزینه آسان این است که دکمه ها را در عنصر <div> محاصره کنید و سبک آن را بر روی text-align تنظیم کنید: center ؛:

div {
text-align: center;
}

رنگ دکمه های CSS

با افزودن رنگ می توان سبک دکمه CSS را بسیار بهبود بخشید. رنگ پس زمینه دکمه را می توان با ویژگی پس زمینه رنگ تغییر داد.

با استفاده از مقادیر HEX ، ما رنگ ها را به دکمه های HTML اختصاص می دهیم:

.button1 {
  width: 100px;
  height: 50px;
  background-color: #008CBA;
  border: none;
  border-radius: 3px;
  } /* Blue */

اندازه متن

ویژگی font-size تعیین می کند که متن دکمه چه اندازه ای داشته باشد. مثال زیر اندازه های مختلف قلم را به دکمه ها اضافه می کند:

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

Padding

برای تنظیم فضای اطراف متن در داخل دکمه ها و دیواره های خارجی ظرف ، از ویژگی CSS padding استفاده می کنیم.

نشانگرهای طول (pt ، cm ، px و غیره) یا مقادیر درصد (٪) سطح پر کردن دکمه ها را تنظیم می کنند.

در این مثال ، برای هر دکمه padding مختلفی تنظیم می کنیم:

.button1 {padding: 10px 24px;}
.button2 {padding: 14px 40px;}
.button3 {padding: 32px 16px;}

گوشه های گرد

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

در مثال زیر ، مقادیر مختلف خاصیت مرز-شعاع را آزمایش می کنیم:

.button1 {border-radius: 3px;}
.button2 {border-radius: 6px;}
.button3 {border-radius: 9px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 60%;}

نکته: مقادیر بالاتر در خاصیت مرز-شعاع می تواند شکل بیضی شکل را ایجاد کند.

مرزها

هر دکمه CSS می تواند یک قاب در اطراف آن داشته باشد. برای افزودن آن فریم ، از حاشیه های CSS استفاده می کنیم.

در مثال ، یک حاشیه به دکمه خود اضافه می کنیم:

.button {
    width: 100px;
    height: 50px;
    background-color: pink;
    color: red;
    border: 3px solid coral;
}

توجه: می توانید سبک ، رنگ و عرض حاشیه را با استفاده از مختصر حاشیه تنظیم کنید.شناور

برای اینکه تعاملی به نظر برسد دکمه های شما می توانید یک کلاس شبه به آنها اختصاص دهید.

سبک دکمه CSS می تواند بعد از عوامل انتخابی: شناور (هنگامی که کاربران روی دکمه می روند) تغییر کند.

در مثال ، هنگامی که نشانگر ماوس را روی دکمه قرار دادیم ، پس زمینه آبی ظاهر می شود:

.button {
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s; /* Safari */
}

.button:hover {
    background-color: #41caf4;
    color: red;
}

نکته: ویژگی دوره انتقال سرعت اثر شناور را تعیین می کند. بنابراین ، زمینه به تدریج ظاهر می شود.

سایه

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

مثال زیر سایه ثابت زیر یک دکمه و سایه ای را نشان می دهد که پس از حرکت مکان نما توسط کاربران بر روی دکمه دیگری ظاهر می شود:

.button1 {
    box-shadow: 0 9px 17px 0 rgba(0,0,0,0.3), 0 7px 21px 0 rgba(0,0,0,0.20);
}

.button2:hover {
    box-shadow: 0 13px 17px 0 rgba(0,0,0,0.25), 0 18px 51px 0 rgba(0,0,0,0.20);
}

ناحیه معلول

ممکن است لازم باشد دکمه را در صفحه نگه دارید اما از کلیک کاربران بر روی آن جلوگیری کنید. با تنظیم ویژگی opacity روشن کنید که دکمه ها غیرفعال می شوند.

.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

علاوه بر این ، سبک دکمه CSS غیرفعال ، یک نشانگر ماوس خاص دارد ، هنگامی که کاربران بر روی آنها حرکت می کنند (با افزودن مکان نما: مجاز نیست).

عرض

CSS عرض دکمه ها را با ویژگی width کنترل می کند.

مثال زیر چند ویژگی عرض را با مقادیر مختلف در عمل نشان می دهد:

.button1 {width: 300px;}
.button2 {width: 60%;}
.button3 {width: 80%;}

گروه ها

برای ارائه دکمه ها در کنار هم ، باید گروه های دکمه CSS را با جایگزینی حاشیه با float ایجاد کنید.

در مثال ، دکمه های خود را در سمت چپ شناور می کنیم:

.button {
    float: left;
}

گروه های هم مرز

وقتی دکمه های CSS به یکدیگر نزدیک هستند ، بهتر است آنها را با حاشیه جدا کنید.

.button {
    float: left;
    border: 3px solid orangered;
}

گروه های عمودی

می توان با سازماندهی دکمه های CSS در یک خط عمودی ، آرایش را تنظیم کرد. می توانید این کار را با تنظیم ویژگی نمایش در مسدود کردن مقدار انجام دهید.

مثال زیر یک گروه دکمه ای عمودی ایجاد می کند:

.button {
    display: block;
}

عکس

برخی از سبک های دکمه CSS به شما امکان می دهند دکمه هایی را در بالای تصاویر قرار دهید. برای دستیابی به این اثر ، شما به ویژگی حالت دادن موقعیت نیاز دارید.

شما با استفاده از کد زیر دکمه های روی تصاویر را ایجاد می کنید:

.container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    padding: 16px 30px;
}

تصاوير متحرك

دکمه با یک پیکان

با افزودن انیمیشن می توانید سبک های دکمه را بهبود بخشید. انتخابگر شناور با opacity باعث می شود تا یک نماد پیکان در کنار متن درون یک دکمه ظاهر شود:

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.7s;
}

.button span:after {
   content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.7s;
}

دکمه فشرده

می توانید سبک دکمه CSS را با انیمیشن های خاص تنظیم کنید تا نحوه فشار دادن دکمه های واقعی را تقلید کند.

در این مثال ، یک دکمه با افکت فشرده ایجاد می کنیم:

.button {
   display: inline-block;
   padding: 17px 27px;
   font-size: 16px;
   cursor: pointer;
   color: white;
   background-color: purple;
   border: none;
   -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  border-radius: 8px;
  box-shadow: 0 10px #998;
}

.button:active {
  background-color: #8842d5;
  box-shadow: 0 6px #667;
  transform: translateY(5px);
}

دکمه محو شدن

ویژگی های انتقال و تیرگی می توانند جلوه محو شدن دکمه ها را ایجاد کنند. برای تنظیم ماشه برای جلوه ، به انتخابگر: hover نیز نیاز دارید.

.button {
   background-color: purple;
   border: none;
   color: #FFFFFF;
   padding: 15px 32px!important;
   text-align: center;
   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;
   text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.3;
}
.button:hover {
  opacity: 1;
}

در این مثال ، ما یک دکمه با افکت موج دار داریم:

.button:after {
   content: "";
   background: #f441f1;
   display: block;
   position: absolute;
   padding-top: 290%;
   padding-left: 340%;
   margin-left: -25px !important;
   margin-top: -130%;
   opacity: 0;
   transition: all 0.9s
}
.button:active:after {
   padding: 0;
   margin: 0;
   opacity: 1;
   transition: 0s;
}

نکات مهم دکمه CSS:

• با استفاده از JavaScript می توانید دکمه ها را کاربردی کنید. به عنوان مثال ، می توانید دکمه های ارسال را برای فرم های خود ایجاد کنید.
• Bootstrap مجموعه ای از دکمه های طراحی شده را ارائه می دهد که می توانید برای وب سایت های خود استفاده کنید.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.