azami.cu@gmail.com | +98912 373 8239

ساخت چند دکمه زیبا با CSS

از مجموعه تکنیک های CSS - برای حرفه ای شدن
button, beautiful button, css button, css3 button, css3 دکمه, دکمه زیبا, طراحی دکمه با css, css تکنیک, css آموزش
به همت مهندس اعظمی در 1392/10/24

سلام بر شما دوستان عزیز



امروز با هم روش های ساخت چند دکمه بسیار زیبا و کامل رو با CSS3 بررسی می کنیم.

کدهای HTML

ابتدا دکمه هامون رو توی صفحه می سازیم که ما اینجا 5 عدد دکمه داریم و برای هر کدوم از اونا یک استایل کلی به نام button قرار میدیم و بعد استایل خاص هر دکمه که به اون اضافه میشه:



و این هم کدهای CSS

برای راحت تر شدن شما توضیحات مرحله به مرحله قرار داده شده

                                    
//استایل کلی همه دکمه ها
.button {
    text-decoration: none;
    color: #fff;
    padding: 12px 20px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #cc0066;  
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    margin-bottom: 40px;
    box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
    background-color: #cc0066;
    margin-right: 20px;
}

//استایلی که با قرار گرفتم ماوس بر روی دکمه اعمال میشه 
.button:hover {
     box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

//استایلی که پس از کلیک کردن بر روی دکمه ایجاد میشه
.button:active {
    box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
    top: 7px;  
}


//استایل عای مختلف که با مقادیر متفاوت در گرد کردن گوشه ها اشکال مورد نظر رو برای ما ایجاد میکنه
.shield {
    border-radius: 5px 5px 35px 35px;   
    padding-left: 25px;
    padding-right: 25px;
}

.criss-cross {
    border-radius: 35px 5px;    
}

.rectangular {
    border-radius: 10px / 35px;
}

.one-corner {
    border-radius: 5px 5px 35px 5px;
    padding-right: 25px;
}
                        

اینم پیش نمایش:




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

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



با تشکر از توجه شما -با عضویت در sarat.ir از آخرین آموزش ها و مطالب با خبر شوید.



Tags: , , , , , , , ,



Tags:   button, beautiful button, css button, css3 button, css3 دکمه, دکمه زیبا, طراحی دکمه با css, css تکنیک, css آموزش