درخواست این دکمه با CSS

[F a r s h i d 19]

سلام

دوستان اینو ببنید چطوری میشه از طریق CSS این دکمه رو ساخت ؟

اینم سایتش : http://www.jazireeh.com/

[m!lad 38]

خودش تقریبا این طوری کرده

<div class="test">

<ul>
<li> <a href="#"> متن برای تست </a> </li>
<li> <a href="#"> متن برای تست </a> </li>
<li> <a href="#"> متن برای تست </a> </li>
<li> <a href="#"> متن برای تست </a> </li>
<li> <a href="#"> متن برای تست </a> </li>
</ul>

.test { float:right ; width: 290px;
height: 109px;
float: right;
}
.test ul { list-style:none ; text-align: right; }
.test ul li { float: right; ; -webkit-transition:all 0.5s ; -moz-transition:all 0.5s ; -ms-transition:all 0.5s ; -o-transition:all 0.5s;
width: 270px;
height: 17px;
background: #ebebeb;
margin: 1px 1px 0px 0px; padding: 2px 1px 2px 5px; border-right: 3px solid #23d7e7 !important;
}
.test ul li a { text-decoration:none ; padding-right: 10px ; ; -webkit-transition:all 0.5s ; -moz-transition:all 0.5s ; -ms-transition:all 0.5s ; -o-transition:all 0.5s;
font: 12px Farshad,Tahoma;
color: #a3a3a3;
text-shadow: 0 1px #F7F7F7;
text-decoration: none; }

.test ul li:hover { background-color:#F7F7F7 }
.test ul li:hover { border-right: 3px solid #e72323!important; }
.test ul li:hover a { margin-right:5px }

این طوری هم میتونی ولی اولیه بهتره

<div class="test">

<ul>
<li> <div class="one"> </div> <a href="#"> متن برای تست </a> </li>
<li> <div class="one"> </div> <a href="#"> متن برای تست </a> </li>
<li> <div class="one"> </div> <a href="#"> متن برای تست </a> </li>
<li> <div class="one"> </div> <a href="#"> متن برای تست </a> </li>
<li> <div class="one"> </div> <a href="#"> متن برای تست </a> </li>
</ul>
</div>

.test { float:right ; width: 290px;
height: 109px;
float: right;
}
.test ul { list-style:none ; text-align: right; }
.test ul li { float: right; transition:all 0.5s ; -webkit-transition:all 0.5s ; -moz-transition:all 0.5s ; -ms-transition:all 0.5s ; -o-transition:all 0.5s;
width: 270px;
height: 17px;
background: #ebebeb;
margin: 1px 1px 0px 0px; padding: 2px 1px 2px 5px;}
.test ul li a { text-decoration:none ; padding-right: 10px ; transition:all 0.5s ; -webkit-transition:all 0.5s ; -moz-transition:all 0.5s ; -ms-transition:all 0.5s ; -o-transition:all 0.5s;
font: 12px Farshad,Tahoma;
color: #a3a3a3;
text-shadow: 0 1px #F7F7F7;
text-decoration: none; }

.test ul li .one { background-color:#23d7e7 ; padding:2px ; width:2px ; height:17px ; float:right ; margin-top: -2px; }
.test ul li:hover { background-color:#F7F7F7 }
.test ul li:hover .one { background-color:#e72323 }
.test ul li:hover a { margin-right:5px }