ساخت دکمه ی سه بعدی با html و css
دسته‌ها : کد های کاربردی , منوها و دکمه ها ۱۵ تیر ۱۳۹۵ - ۱۹:۰۸ امیر رضائی بدون نظر
خانه کد های کاربردیمنوها و دکمه ها ساخت دکمه ی سه بعدی با html و css

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>

 

پیش نمایش

 

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


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

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید