CSS3 Button Mighty Deals

Tabel Konten
  1. CSS 
  2. HTML 
  3. Demo 
Mighty Deals
http://www.mightydeals.com/

Tidak sama persis memang, tapi lumayan mirip :)

CSS 

.md-ribbon {
  display:block;
  margin:0px auto;
  font:bold 22px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 0px rgba(0,0,0,0.4);
  text-decoration:none;
  width:200px;
  height:65px;
  line-height:65px;
  padding:0px 25px;
  background:#F05328;
  background:-webkit-radial-gradient(top, #FDA437, #F05328);
  background:-moz-radial-gradient(top, #FDA437, #F05328);
  background:-ms-radial-gradient(top, #FDA437, #F05328);
  background:-o-radial-gradient(top, #FDA437, #F05328);
  background:radial-gradient(top, #FDA437, #F05328);
  border:1px solid #F05028;
  -webkit-box-shadow:inset 0px 1px 0px #FFDF6A, 0px 7px 10px -5px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 1px 0px #FFDF6A, 0px 7px 10px -5px rgba(0,0,0,0.4);
  box-shadow:inset 0px 1px 0px #FFDF6A, 0px 7px 10px -5px rgba(0,0,0,0.4);
  -webkit-border-radius:5px 35px 35px 5px;
  -moz-border-radius:5px 35px 35px 5px;
  border-radius:5px 35px 35px 5px;
  cursor:pointer;
  position:relative;
}

.md-ribbon:after {
  content:"";
  width:10px;
  height:10px;
  background-color:white;
  border:1px solid #F05028;
  position:absolute;
  top:27px;
  right:25px;
  -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.4), inset 0px 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4), inset 0px 1px 1px rgba(0,0,0,0.3);
  box-shadow:0px 1px 1px rgba(255,255,255,0.4), inset 0px 1px 1px rgba(0,0,0,0.3);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.md-ribbon:hover {
  background:#F0642C;
  background:-webkit-radial-gradient(top, #FFB92E, #F0642C);
  background:-moz-radial-gradient(top, #FFB92E, #F0642C);
  background:-ms-radial-gradient(top, #FFB92E, #F0642C);
  background:-o-radial-gradient(top, #FFB92E, #F0642C);
  background:radial-gradient(top, #FFB92E, #F0642C);
}

.md-ribbon:active {
  background:#F05328;
  background:-webkit-linear-gradient(top, #F05328, #FDA437);
  background:-moz-linear-gradient(top, #F05328, #FDA437);
  background:-ms-linear-gradient(top, #F05328, #FDA437);
  background:-o-linear-gradient(top, #F05328, #FDA437);
  background:linear-gradient(top, #F05328, #FDA437);
}

HTML 

<a href="#" class="md-ribbon">Free Download</a>

Demo 

Free Download

3 Komentar

  • Unknown

    Untuk mengator heigth sama width-nya gimana yah mas... =D

    • Taufik Nurrohman

      .md-ribbon {
      width:200px;
      height:65px;
      line-height:65px;
      }
  • Unknown

    kang ada gk yang CSSnya kayak tombol dingdong?

Komentar telah ditutup.