رفتن به مطلب

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


پست های پیشنهاد شده

سلام

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

1471513984478094719_btn.jpg

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

لینک به ارسال

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

<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 }

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...