Skip to content

Instantly share code, notes, and snippets.

Created November 30, 2016 23:40
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
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 */
function() {
<script src=""></script>
@import url(;
.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: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 {
background-color: #c47135;
.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