HTML
<h1>Pure Css Button</h1>
<div class="main">
<div class="sub-main">
<button class="button-one">Tap Me</button>
</div>
<div class="sub-main">
<button class="button-two"><span>Hover Me</span></button>
</div>
<div class="sub-main">
<button class="button-three">Click Me</button>
</div>
<p>More Buttons will be reached...<br>
bulit with ♥ by <a href="https://m4mohaiman.github.io" tagget="_blank">Mohaiman..
</p>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);
*{margin: 0px; padding: 0px}
body{
background:#2c3e50;
font-family: 'Open Sans', sans-serif;
}
h1, button{
color:#fff;
text-align: center;
padding: 20px;
}
p{
color:#fff;
text-align: center;
padding-top: 500px;
font-size: 10px;
}
a{
text-decoration:none;
color:#fff;
}
a:hover{
color:#2ecc71;
}
.main{
width: 100%;
}
.sub-main{
width: 25%;
margin:22px;
float: left;
}
.button-one, .button-two, .button-three{
text-align: center;
cursor: pointer;
font-size:24px;
margin: 0 0 0 100px;
}
/*Button One*/
.button-one {
padding:20px 60px;
outline: none;
background-color: #27ae60;
border: none;
border-radius:5px;
box-shadow: 0 9px #95a5a6;
}
.button-one:hover{
background-color: #2ecc71;
}
.button-one:active {
background-color: #2ecc71;
box-shadow: 0 5px #95a5a6;
transform: translateY(4px);
}
/*Button Two*/
.button-two {
border-radius: 4px;
background-color:#d35400;
border: none;
padding: 20px;
width: 200px;
transition: all 0.5s;
}
.button-two span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button-two span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button-two:hover span {
padding-right: 25px;
}
.button-two:hover span:after {
opacity: 1;
right: 0;
}
/*Button Three*/
.button-three {
position: relative;
background-color: #f39c12;
border: none;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.button-three:hover{
background:#fff;
box-shadow:0px 2px 10px 5px #97B1BF;
color:#000;
}
.button-three:after {
content: "";
background: #f1c40f;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button-three:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
