17
تشکر

چگونه یک دکمه زیبا با CSS3 بسازیم؟

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

امروزه با CSS3 کارهای فوق العاده ای انجام میشود. در این مطلب قرار است ببینیم که چگونه باید یک دکمه زیبا با استفاده از CSS3 بسازیم و از آن ایده بگیریم.

ما قرار است از خاصیت هایی مانند animations, transform استفاده کنیم.

در ادامه با ما همراه باشید.

HTML

ابتدا کد HTML را در صفحه میگذاریم.

<button class="btn1">Click Me!</button>

قرار است کدهای ما به کلاس btn1 داده شود.

CSS

کدهای CSS را در زیر میبینید:

.btn1{
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 15px;
  margin: 20px auto;
  color: #ccc;
  background-color: #555;
  background-image: linear-gradient(top, #888 0%, #555 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(1, #555));
  background-image: -moz-linear-gradient(top, #888 0%, #555 100%);
  background-image: -o-linear-gradient(top, #888 0%, #555 100%);
  border: none;
  border-radius: 3px;
  text-shadow: 0px -1px 0px #000;
  box-shadow: 0px 1px 0px #666,
                      0px 5px 0px #444,
                      0px 6px 6px rgba(0, 0, 0, .6);
  cursor: pointer;

  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;

فکر نکنم چیزی برای توضیح باشد.   فقط در پایین دکمه یک حالتی ایجاد شده است که حس سه بعدی بودن دکمه را به کاربر میدهد. که اینکار با استفاده از text-shadow انجام شده است. box-shadow واقعا خصوصیت جذابی است و با استفاده از آن کارهای واقعا خوبی میتوان انجام داد. برای آشنایی بیشتر با این خصوصیت به مطلب “ساخت آیکون با استفاده از عناصر HTML” مراجعه کنید. همچنین از گرادینت ها هم استفاده کردیم. (اگر دوستان مایلند مطلبی هم در آینده در مورد گرادینت ها منتشر خواهم کرد).

خوب هنوز کار تمام نشده است. به انتهای دستورات بالا کدهای زیر را هم اضافه میکنیم. ما میخواهیم به دکمه خودمان حالت انیمیشن را القا کنیم. برای اجرا شدن کدها مجبور هستیم از پیشوند مخصوص هر مروگر اضافه کنیم. البته آخرین نسخه مرورگرهای Firefox, Opera و IE10 بدون پیشوند هم کدهای زیر را اجرا میکنند اما در نسخه های قبلی اینطور نیست.

-webkit-transition: ease .15s all;
-moz-transition: ease .15s all;
-o-transition: ease .15s all;
transition: ease .15s all;

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

ما میخواهیم وقتی کاربر ماوس را روی دکمه آورد, متن دکمه به صورت خاموش و روشن در بیاید. برای اینکار باید از انیمیشن ها استفاده کنیم:

.btn1:hover, .btn1:focus{
  -webkit-animation: linear 1.2s light infinite;
  -moz-animation: linear 1.2s light infinite;
  -o-animation: linear 1.2s light infinite;
  animation: linear 1.2s light infinite;
}

به خاصیت animation بالا چهار پارامتر داده شده است. پارامتر اول (linear) نحوه اجرا شده انیمیشن است که به صورت خطی انتخاب شده است. پارامتر دوم (1.2s) مدت زمان اجرا شدن انیمیشن است. پارامتر سوم (light) اسم انیمیشنی است که قرار است آن را اجرا کند و پارامتر چهارم (infinite) به مروگر میگوید که برای همیشه این انیمیشن را اجرا کند. به این معنی که اگر مدت زمان انیمشین تمام شد دوباره آن را اجرا کند. میتوان به جای آن عدد هم نوشت. اما انیمیشن light کدام انیمیشن است؟ این انیمیشن را خودمان باید درست کنیم:

@-webkit-keyframes light{
  0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
  50%  { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
  100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-moz-keyframes light{
  0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
  50%  { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
  100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-o-keyframes light{
  0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
  50%  { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
  100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@keyframes light{
  0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
  50%  { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
  100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}

در کدهای بالا سه زمان وجود دارد. صفر درصد, 50 درصد و 100 درصد که درون آن کدهایی وجود دارد. به این معنی که کدهای درون آن در زمان برای مثال 50 درصد اجرا شوند. البته میتوان زمان های دلخواه دیگر را هم اضافه کرد.

اگر الان دکمه را امتحان کنید میبینید که متن آن روشن و خاموش میشود.

فقط حالت active آن مانده است. یعنی زمانی که روی آن رویداد کلیک اتفاق می افتد:

.btn1:active{
  color: #fff;
  text-shadow: 0px -1px 0px #444,
                      0px 0px 5px #ffd,
                      0px 0px 8px #fff;
                      
  box-shadow: 0px 1px 0px #666,
                      0px 2px 0px #444,
                      0px 2px 2px rgba(0, 0, 0, .9);
  -webkit-transform: translateY(3px);
  -moz-transform: translateY(3px);
  -o-transform: translateY(3px);
  transform: translateY(3px);
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}

مشاهده آنلاین:

  • HOSSEIN می‌گه:

    سلام.ممنون از سایت بسیار مفیدتون. من یه مشکل در این زمینه دارم اونم اینه چه جوری چند دکمه کنار هم اینطوری بسازم؟؟؟ هرکاری می کنم نمیشه ممنون میشم جواب بدید

  • جعفر می‌گه:

    سلام

    خاصیت display: block; برای چیه ؟


  • نظرات این مطلب بسته است.