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

[espad]

سلام دوستان کسی میتونه کد html , css دکمه ها و اون نوار ابزار سایت زیر یا شبیه این رو بهم بده ؟
ممنون میشم
پانیز پیامک | پنل اس ام اس پانیز پیامک | پنل اس ام اس » پنل اس ام اس

[xaep]

کد html :

<
!DOCTYPE html>

<
head>

    
<title></title>

    
<link href="stylesheet.css" rel="stylesheet" />

</
head>

<
body>

    
<div class="key">تست<div class="key_des">متنی اضافه کنید</div></div>

</
body>

</
 
html>

کد css:

.key
{

    
background-color: #27ae3a;

    
font-family: B Yekan;

    
font-size: 28px;

    
color: #fff;

    
width: 145px;

    
height: 75px;

    
border-radius: 5px;

    
float: right;

    
text-align: center;

    
margin: 20px 0 0 20px;

    
padding-top: 5px;

    
transition: .3s;

    
-webkit-transition: .3s;

    
-o-transition: .3s;

    
-moz-transition: .3s;

    
cursor: pointer;

}

.key:hover
{

    
background-color: #464646;

}

.key_des
{

    
font-family: B Yekan;

    
font-size: 12px;

    
color: #fff;

    
text-align: center;

}

[espad]

کد html :

<
!DOCTYPE html>

<
head>

    
<title></title>

    
<link href="stylesheet.css" rel="stylesheet" />

</
head>

<
body>

    
<div class="key">تست<div class="key_des">متنی اضافه کنید</div></div>

</
body>

</
 
html>

کد css:

.key
{

    
background-color: #27ae3a;

    
font-family: B Yekan;

    
font-size: 28px;

    
color: #fff;

    
width: 145px;

    
height: 75px;

    
border-radius: 5px;

    
float: right;

    
text-align: center;

    
margin: 20px 0 0 20px;

    
padding-top: 5px;

    
transition: .3s;

    
-webkit-transition: .3s;

    
-o-transition: .3s;

    
-moz-transition: .3s;

    
cursor: pointer;

}

.key:hover
{

    
background-color: #464646;

}

.key_des
{

    
font-family: B Yekan;

    
font-size: 12px;

    
color: #fff;

    
text-align: center;

}

ممنونم دوست عزیز . اون نوار بالایی رو چطوری درست کنم ؟

[xaep]

کد html نوار:

<
!DOCTYPE html>

<
head>

    
<title></title>

    
<link href="stylesheet.css" rel="stylesheet" />

</
head>

<
body>

    
<div class="offer">پیشنهاد ویژه : <span>در حال حاضر جشنواره ای در حال برگزاری نمی باشد</span>

    
<div class="showoffer">مشاهده پیشنهاد</div>

    
</div>

</
body>

</
html>

کد css نوار:

.offer
{

    
background:url(http://www.panizsms.com/wp-content/themes/paniz-1.2/images/offer.png) no-repeat 960px center;

    
background-color: #464646;

    
width: 940px;

    
height: 42px;

    
border-radius: 5px;

    
font-family: B Yekan;

    
font-size: 20px;

    
direction: rtl;

    
margin:auto;

    
padding: 8px 60px 0 0;

    
color: #fff;

    
margin-top: 20px;

}

.offer
 span{

    
text-decoration: none;

    
font-family: Tahoma, Geneva, sans-serif;

    
font-size: 12px;

    
color: #c3c3c3;

    
padding-right: 10px;

}

.showoffer
{

    
background-color: #FFF;

    
width: 100px;

    
height: 30px;

    
border-radius: 3px;

    
float: left;

    
margin: 3px 0 0 10px;

    
color: #333;

    
font-size: 13px;

    
text-align: center;

    
line-height: 30px;

    
transition: .3s;

    
-webkit-transition: .3s;

    
-o-transition: .3s;

    
-moz-transition: .3s;

    
cursor: pointer;

}

.showoffer:hover
{

    
background:#CC3C3C;

    
color:#ffffff;

}

[tarenoco]

خیلی ممنون از شما دوست عزیز