CSS3 Button Mighty Deals
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: CSS, Eksperimen, Potongan
2 Comments:
Untuk mengator heigth sama width-nya gimana yah mas... =D
.md-ribbon {
width:200px;
height:65px;
line-height:65px;
}
Post a Comment
<< Home