Tutorial Details
- Judul: CSS3 chocolate button
- Difficulty: Beginner
- Platform: -
- Bahasa Scripth: CSS
- Software : Notepad++
- Estimated Completion Time: 15 minutes
- Created:Ricko Nada (Pustaka Flash)
live demo :
Scripth yang digunakan :
CSS3 coding :
/* coklatebtnlate Button */
.coklatebtn {
outline:none;
cursor:pointer;
display:inline-block;
background-color:#54341A;
text-shadow:0px 1px 0px rgba(255,255,255,0.1);
text-decoration:none;
font:normal 20px 'Monotype Corsiva','Book Antiqua',Georgia,Serif;
color:#170D05;
width:120px;
text-align:center;
margin:2px;
padding:0px 0px;
line-height:40px;
border-top:9px solid #6A4021;
border-right:10px solid #39210D;
border-bottom:10px solid #241505;
border-left:10px solid #402712;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
0px 1px 2px black;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
0px 1px 2px black;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
0px 1px 2px black;
}
.coklatebtn:hover {
background-color:#4B2E17;
border-color:#5F391F #311F0D #170D03 #341F0F;
}
.coklatebtn:active {
border-color:#170D03 #341F0F #5F391F #311F0D;
-webkit-box-shadow:none;
-moz-box-shadow:none;
HTML coding :
<button class="coklatebtn">coklatebtnlate</button>
5 Halaman yang sering dikunjungi:
0 komentar:
Post a Comment