Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#1535 - Button
<button class="snip1535">Submit</button>
<button class="snip1535 hover">Read More</button>
<button class="snip1535">Add to Cart</button>
<button class="snip1535">Subscribe</button>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.snip1535 {
background-color: #c47135;
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;
}
.snip1535:before,
.snip1535: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;
}
.snip1535:before {
border-color: #c47135;
border-right-width: 2px;
border-top-width: 2px;
right: -5px;
top: -5px;
}
.snip1535:after {
border-bottom-width: 2px;
border-color: #c47135;
border-left-width: 2px;
bottom: -5px;
left: -5px;
}
.snip1535:hover,
.snip1535.hover {
background-color: #c47135;
}
.snip1535:hover:before,
.snip1535.hover:before,
.snip1535:hover:after,
.snip1535.hover:after {
height: 100%;
width: 100%;
}
/* Demo purposes only */
body {
background-color: #212121;
padding: 50px 0;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment