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

سلام دوستان کسی میتونه کد html , css دکمه ها و اون نوار ابزار سایت زیر یا شبیه این رو بهم بده ؟
ممنون میشم
پانیز پیامک | پنل اس ام اس پانیز پیامک | پنل اس ام اس » پنل اس ام اس
http://www.webhostingtalk.ir/attachm...apture-004-png

کد html :

کد 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:

کد HTML:

---

.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 :

کد 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:

کد HTML:

---

.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;

}

---

---

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

کد html نوار:

کد 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 نوار:

کد HTML:

---

.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;

}

---

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