Own Button Style with CSS
HTML
<div class="box">
<h1>Create Own Button Style With CSS</h1>
<button>Button</button>
<button class="btn">Button btn</button>
<button class="btn c2">Button c1</button>
<button class="btn c1">Button c2</button>
<button class="btn c3">Button c3</button>
<hr/>
<button class="btn c4">Button c4</button>
<button class="btn c5">Button c5</button>
<button class="btn c6">Button c6</button>
<button class="btn c7">Button c7</button>
<button class="btn c8">Button c8</button>
<hr/>
<button class="btn ucase">Upper Case</button>
<button class="btn c9 ucase">UCase c9</button>
<button class="btn c10 ucase">UCase c10</button>
<button class="btn c11 ucase">UCase c11</button>
</div>
CSS
.btn:active{
opacity:0.6;
box-shadow: inset 0px 0px 5px 0px #ABABAB;
-webkit-box-shadow: inset 0px 0px 5px 0px #ABABAB;
-moz-box-shadow: inset 0px 0px 5px 0px #ABABAB;
-o-box-shadow: inset 0px 0px 5px 0px #ABABAB;
}
.btn{
padding:15px;
border-radius:3px;
border:1px solid #D3D3D3;
background-color:white;
}
.c1{
background-color:#778899;
color:white;
}
.c2{
background-color:#F8F8FF;
color:black;
}
.c3{
background-color:#808080;
color:white;
}
.c4{
background-color:#95a5a6;
color:white;
}
.c5{
background-color:#16a085;
color:white;
}
.c6{
background-color:#00cc66;
color:white;
}
.c7{
background-color:#33ccff;
color:white;
}
.c8{
background-color:#FF69B4;
color:white;
}
.c9{
background-color:#27ae60;
color:white;
}
.c10{
background-color:#16a085;
color:white;
}
.c11{
background-color:#d35400;
color:white;
}
.box{
margin: auto;
width: 50%;
}
.ucase{
text-transform: uppercase;
}
