ساخت دکمه ی سه بعدی با html و css
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

button

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

این دکمه ها با حجم بسیار کم می تونه جایگزین مناسبی برای دکمه های gif و یا swf باشه همچنین برخی از سایت ها و وبلاگ ها می تواندد متاباکس های حرفه ای را به کمک این کدها ایجاد کنند.مثلا سایت های فروش قالب یا دانلود سنتر ها برای دکمه ی خرید و یا دمو و  دانلود از این استایل ها استفاده کنند.قبل از شروع بهتون پیشنهاد می کنم تا دموی نهایی کار رو در انتهای مطلب ببینید.

در ابتدا کدهای زیر رو در قسمت استایل قالب خودتون قرار بدین ( شما می تونین کدها رو در بخش style.css قرار بدین و یا در قالب در بخش head ما بین های تگ های <style></style> قرار بدین)

 

.button{
    position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    margin: 25px auto;
    min-width: 250px;
    max-width: 35%;
    text-align: center;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
 
.button:active {
    position: relative;
    top: 6px;
}
 
.button-blue{
    background-color: rgba(118,167,250,1);
    -webkit-box-shadow: 0px 9px 0px rgba(66,133,244,1);
    -moz-box-shadow: 0px 9px 0px rgba(66,133,244,1);
    box-shadow: 0px 9px 0px rgba(66,133,244,1);
}
 
.button-blue:active {
    -webkit-box-shadow: 0px 3px 0px rgba(66,133,244,1);
    -moz-box-shadow: 0px 3px 0px rgba(66,133,244,1);
    box-shadow: 0px 3px 0px rgba(66,133,244,1);
}
 
.button-blue:hover{
    background: rgba(160,195,255,1);
}
 
.button-red{
    background-color: rgba(229,115,104,1);
    -webkit-box-shadow: 0px 9px 0px rgba(219,115,104,1);
    -moz-box-shadow: 0px 9px 0px rgba(219,115,104,1);
    box-shadow: 0px 9px 0px rgba(219,115,104,1);
}
 
.button-red:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,115,104,1);
    -moz-box-shadow: 0px 3px 0px rgba(219,115,104,1);
    box-shadow: 0px 3px 0px rgba(219,115,104,1);
}
 
.button-red:hover{
    background: rgba(237,157,151,1);
}
 
.button-yellow{
    background-color: rgba(251,203,67,1);
    -webkit-box-shadow: 0px 9px 0px rgba(244,180,0,1);
    -moz-box-shadow: 0px 9px 0px rgba(244,180,0,1);
    box-shadow: 0px 9px 0px rgba(244,180,0,1);
}
 
.button-yellow:active {
    -webkit-box-shadow: 0px 3px 0px rgba(244,180,0,1);
    -moz-box-shadow: 0px 3px 0px rgba(244,180,0,1);
    box-shadow: 0px 3px 0px rgba(244,180,0,1);
}
 
.button-yellow:hover{
    background: rgba(255,225,104,1);
}
 
.button-green{
    background-color: rgba(51,182,121,1);
    -webkit-box-shadow: 0px 9px 0px rgba(15,157,88,1);
    -moz-box-shadow: 0px 9px 0px rgba(15,157,88,1);
    box-shadow: 0px 9px 0px rgba(15,157,88,1);
}
 
.button-green:active {
    -webkit-box-shadow: 0px 3px 0px rgba(15,157,88,1);
    -moz-box-shadow: 0px 3px 0px rgba(15,157,88,1);
    box-shadow: 0px 3px 0px rgba(15,157,88,1);
}
 
.button-green:hover{
    background: rgba(123,207,169,1);
}
 
.column{
    width:50%;
    float:left;
}

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

در مرحله ی بعد باید این کدها رو در html و یا php فراخوانی کنید. که باید با توجه به رنگ دلخواه تنها از ۴ کلاس css زیر استفاده کنید :

استفاده از دکمه قرمز:

<a href="http://www.blog-theme.ir/" class="button button-red">blog-theme</a>

استفاده از دکمه آبی:

<a href="http://www.blog-theme.ir/" class="button button-blue">blog-theme</a>

استفاده از دکمه سبز:

<a href="http://www.blog-theme.ir/" class="button button-green">blog-theme</a>

استفاده از دکمه زرد:

<a href="http://www.blog-theme.ir/" class="button button-yellow">blog-theme</a>

 

پیش نمایش

 

امیر رضائی وبسایت


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

مطالب مشابه با این موضوع

بالا رفتن