Css3 Chocolate Button

Published by Concept Phone Sabtu, 16 Februari 2019

CSS

/* Chocolate Button */  .choco {   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; }  .choco:hover {   background-color:#4B2E17;   border-color:#5F391F #311F0D #170D03 #341F0F; }  .choco:active {   border-color:#170D03 #341F0F #5F391F #311F0D;   -webkit-box-shadow:none;   -moz-box-shadow:none;   box-shadow:none; }

HTML

<button class="choco">Chocolate</button>

Demo

Chocolate

Chocolate

Chocolate

Chocolate

Chocolate

Chocolate

Sumber https://www.dte.web.id/