PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : دکمه های چند رنگ به صورت CSS



Patch Master
2012/12/04, 02:06 PM
درود، خب این اولین کار منه همینجوری طبق یک سری آموزش ساختم انشالله که خوشتون بیاد فایل پیوست شد


<!--دکمه شکاره 1-->
<style type="text/css">
#sal {
border:solid 1px none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:15px 34px;
background: -moz-linear-gradient(top, #F30, #C30);
background: -webkit-linear-gradient(top, #F30, #C30);
background: -o-linear-gradient(top, #F30, #C30);
background: -ms-linear-gradient(top, #F30, #C30);
color:#FFFFFF;
text-decoration:none;
text-shadow:0 -1px 0 #000;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-weight:bold;

}


#sal:hover{
border:solid 1px none;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
</style>
<a id="sal" href="">You'r Text 1 </a>
<!--دکمه شکاره 1-->

<!--دکمه شکاره 2-->
<style type="text/css">
#sala {
border:solid 1px none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:15px 34px;
background: -moz-linear-gradient(top, #09C, #06C);
background: -webkit-linear-gradient(top, #09C, #06C);
background: -o-linear-gradient(top, #09C, #06C);
background: -ms-linear-gradient(top, #09C, #06C);
color:#FFFFFF;
text-decoration:none;
text-shadow:0 -1px 0 #000;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-weight:bold;

}


#sala:hover{
border:solid 1px none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
color:#000066;
}
</style>
<a id="sala" href="">You'r Text 2 </a>

<!--دکمه شکاره 2-->



<!--دکمه شکاره 3-->
<style type="text/css">
#salar {
border:solid 1px none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:15px 34px;
background: -moz-linear-gradient(top, #FFF, #CCC);
background: -webkit-linear-gradient(top, #09C, #06C);
background: -o-linear-gradient(top, #09C, #06C);
background: -ms-linear-gradient(top, #09C, #06C);
color:#666;
text-decoration:none;
text-shadow:0 -1px 0 #000;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-weight:bold;

}


#salar:hover{
border:solid 1px none;
border-radius: 0 8px 0;
-moz-border-radius: 0 8px 0;
-webkit-border-radius: 0 8px 0;
color:#999;

}
</style>
<a id="salar" href="">You'r Text 3 </a>
<!--دکمه شکاره 3-->




<!--دکمه شکاره 4-->
<style type="text/css">
#salars {
border:solid 1px none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:15px 34px;
background: -moz-linear-gradient(top, #06C, #09C);
background: -webkit-linear-gradient(top, #09C, #06C);
background: -o-linear-gradient(top, #09C, #06C);
background: -ms-linear-gradient(top, #09C, #06C);
color:#FFFFFF;
text-decoration:none;
text-shadow:0 -1px 0 #000;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-weight:bold;

}


#salars:hover{
border:solid 1px none;
border-radius: 0 8px 0;
-moz-border-radius: 0 8px 0;
-webkit-border-radius: 0 8px 0;
color:#000066;
}
</style>
<a id="salars" href="">You'r Text 4 </a>
<!--دکمه شکاره 4-->



<!--دکمه شکاره 5-->
<style type="text/css">
#salarsa {
border:solid 1px none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:15px 34px;
background: -moz-linear-gradient(top, #CCC, #fff);
background: -webkit-linear-gradient(top, #CCC, #fff);
background: -o-linear-gradient(top, #CCC, #fff);
background: -ms-linear-gradient(top, #CCC, #fff);
color:#666;
text-decoration:none;
text-shadow:0 -1px 0 #000;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
font-weight:bold;

}


#salarsa:hover{
border:solid 1px none;
border-radius: 0 0 0;
-moz-border-radius: 0 0 0;
-webkit-border-radius: 0 0 0;
color:#000;
}
</style>
<a id="salarsa" href="">You'r Text 5 </a>
<!--دکمه شکاره 5-->





<!--دکمه شکاره 6-->
<style type="text/css">
#salarsad {
border:solid 1px none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:15px 34px;
background: -moz-linear-gradient(top, #C30, #F30);
background: -webkit-linear-gradient(top, #C30, #F30);
background: -o-linear-gradient(top, #C30, #F30);
background: -ms-linear-gradient(top, #C30, #F30);
color:#fff;
text-decoration:none;
text-shadow:0 -1px 0 #000;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
font-weight:bold;

}


#salarsad:hover{
border:solid 1px none;
border-radius: 5px 0 0;
-moz-border-radius: 5px 0 0;
-webkit-border-radius: 5px 0 0;
color:#333;
text-shadow:none;
}
</style>
<a id="salarsad" href="">You'r Text 6 </a>
<!--دکمه شکاره 6-->

OmidX
2012/12/04, 02:46 PM
تایید شد .