لطفا صبر کنید ...

نحوه ایجاد دکمه با CSS3

الهام غایب

توسط الهام غایب

نویسنده
دیدگاه ها: 0
بازدید ها : 80
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

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


نحوه ایجاد دکمه با CSS3

کدهای HTML

کدهای HTML به کار رفته در این طراحی بسیار ساده است، فقط با کلاس “button” سه تگ anchor ایجاد می‌کنیم چون می‌خواهیم سه استایل با رنگ‌های متفاوت ایجاد کنیم که به هر کدام یک کلاس رنگی متفاوت را لینک بدهیم:

<div id="css">
    <img src="img/css.png" alt="title image">
    <a href="#" class="button big green">sign in <span>One minute</span></a>
    <a href="#" class="button big blue">sign in <span>One minute</span></a>
    <a href="#" class="button big gray">sign in <span>One minute</span></a>
    <a href="#" class="button green">button</a>
    <a href="#" class="button blue">button</a>
    <a href="#" class="button gray">button</a>
</div>

نحوه ایجاد دکمه با CSS3

ایجاد استایل اولیه CSS

حالا که می‌خواهیم استایل و فرم اولیه CSS را به دکمه‌ها بدهیم از خصوصیت ‘display:inline-block’ استفاده می‌کنیم تا بتوانیم از آن به عنوان یک عنصر بلاک استفاده کنیم. خصوصیات دیگر شامل استایل‌های CSS2 هستند که نباید مشکلی در درک آن‌ها داشته باشید:

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
}

پس از پرداختن به بخش مربوط به CSS3، می‌خواهیم کمی رنگ اولیه پشت زمینه و متن برای هر کدام از استایل‌های رنگی ایجاد کنیم:

.green {
    color: #3e5706;
    background: #a5cd4e;
}

/* Blue Color */

.blue {
    color: #19667d;
    background: #70c9e3;
}

/* Gray Color */

.gray {
    color: #515151;
    background: #d3d3d3;
}

نحوه ایجاد دکمه با CSS3

ایجاد استایل با CSS3

بخش سرگرم کننده طراحی شروع شد. حالا کمی گوشه‌های گرد، سایه و انیمیشن‌های اولیه اضافه می‌کنیم. توجه کنید که از پیشوند‌های مختلف برای هر مرورگر استفاده خواهیم کرد. لازم است به این روش عمل شود چون این خصوصیات در برخی از مرورگرهای در مرحله آزمایش هستند و باید برای اشاره به آن‌ها از پیشوند استفاده کنیم:

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

نحوه ایجاد دکمه با CSS3

 رنگ پشت زمینه CSS3

در این بخش گرادینت پشت زمینه CSS3 برای هر یک از استایل‌های رنگی ایجاد می‌کنیم. اگر می‌خواهید گرادینت‌های بیشتری برای پشت زمینه ایجاد کنیم کافی است رنگ‌ها را تغییر دهید:

/* Green Color */

.green {
    color: #3e5706;

    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}

/* Blue Color */

.blue {
    color: #19667d;

    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}

/* Gray Color */

.gray {
    color: #515151;

    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

نحوه ایجاد دکمه با CSS3

 ایجاد دکمه های بزرگ

برای ایجاد استایل دکمه‌های بزرگ یک کلاس 'big' اضافه کرده و یک تگ span با کمی متن اضافه می‌کنیم:

<a href="#" class="button big green">sign in <span>One minute</span></a>

<a href="#" class="button big blue">sign in <span>One minute</span></a>

<a href="#" class="button big gray">sign in <span>One minute</span></a>

 

/* Big Button Style */

.big {
    padding: 0 40px;
    padding-top: 10px;
    height: 45px;
    text-transform: uppercase;
    font: bold 20px/22px Arial, sans-serif;
}

.big span {
    display: block;
    text-transform: none;
    font: italic normal 12px/18px Georgia, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

 

نحوه ایجاد دکمه با CSS3

 افکت موس و حالت فعال

برای افکت موس و ایجاد حالت فعال کافی است که box-shadows را ویرایش کنیم:

.button:hover {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}

نحوه ایجاد دکمه با CSS3

حالت فعال:

.button:active {
    -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

نحوه ایجاد دکمه با CSS3

مقالات کاربردی مشابه CSS3 در لیداوب:

به همین راحتی می‌توانید دکمه‌هایی زیبا با CSS3 ایجاد کنید. برای یادگیری امکانات و ترفندهای دیگر CSS3، می‌توانید مقالات کاربردی مشابه ما در لیداوب را دنبال کنید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های