Tuesday, February 21, 2012

CSS3 Button Mighty Deals

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

Labels: , ,

2 Comments:

At Monday, May 27, 2013 at 12:20:00 PM GMT+7, Blogger Unknown said...

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

 
At Monday, May 27, 2013 at 5:17:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 

Post a Comment

<< Home