<button class="btnJurnal">Submit</button>
<button class="btnJurnal">Read More</button>
<button class="btnJurnal">Add to Cart</button>
<button class="btnJurnal">Subscribe</button>
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.btnJurnal {
background-color: #2980b9;
border: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: 'BenchNine', Arial, sans-serif;
font-size: 1em;
font-size: 22px;
line-height: 1em;
margin: 15px 40px;
outline: none;
padding: 12px 40px 10px;
position: relative;
text-transform: uppercase;
font-weight: 700;
}
.btnJurnal:before,
.btnJurnal:after {
border-color: transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
border-style: solid;
border-width: 0;
content: "";
height: 24px;
position: absolute;
width: 24px;
}
.btnJurnal:before {
border-color: #c0392b;
border-top-width: 2px;
left: 0px;
top: -5px;
}
.btnJurnal:after {
border-bottom-width: 2px;
border-color: #c47135;
bottom: -5px;
right: 0px;
}
.btnJurnal:hover,
.btnJurnal.hover {
background-color: #e67e22;
}
.btnJurnal:hover:before,
.btnJurnal.hover:before,
.btnJurnal:hover:after,
.btnJurnal.hover:after {
height: 100%;
width: 100%;
}
body {
background-color:#2c3e50;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.