A nice little css button from a-l-a-a.com.
A Pen by Jordan Halvorsen on CodePen.
<section id="intro"> | |
<div id="intro-content" class="center-content"> | |
<div class="center-content-inner"> | |
<div class="content-section content-section-margin"> | |
<div class="content-section-grid clearfix"> | |
<a href="#" class="button nav-link"> | |
<div class="bottom"></div> | |
<div class="top"> | |
<div class="label">Go Retro Baby</div> | |
<div class="button-border button-border-left"></div> | |
<div class="button-border button-border-top"></div> | |
<div class="button-border button-border-right"></div> | |
<div class="button-border button-border-bottom"></div> | |
</div> | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> |
html { | |
border: 0; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: auto; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
*,*:before,*:after { | |
-webkit-box-sizing: inherit; | |
-moz-box-sizing: inherit; | |
box-sizing: inherit; | |
} | |
body { | |
background-color: #fff; | |
padding: 0; | |
margin: 0; | |
height: auto; | |
width: 100%; | |
} | |
#intro { | |
width: 300px; | |
margin: 50px auto 0; | |
} | |
.button { | |
display: inline-block; | |
text-decoration: none; | |
position: relative; | |
margin-top: 40px; | |
} | |
.button .bottom { | |
position: absolute; | |
left: 7px; | |
top: 7px; | |
width: 100%; | |
height: 100%; | |
background-color: #2acdc1; | |
display: block; | |
-webkit-transition: all .15s ease-out; | |
-moz-transition: all .15s ease-out; | |
-o-transition: all .15s ease-out; | |
transition: all .15s ease-out; | |
} | |
.button .top { | |
position: relative; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
padding: 24px 34px 22px 34px; | |
border: 2px solid #04049d; | |
} | |
.button-dark .top { | |
border: 2px solid #fff; | |
} | |
.button .top .label { | |
font-family: sans-serif; | |
font-weight: 600; | |
color: #04049d; | |
font-size: 12px; | |
line-height: 110%; | |
letter-spacing: 2px; | |
text-align: center; | |
text-transform: uppercase; | |
-webkit-transition: all .15s ease-out; | |
-moz-transition: all .15s ease-out; | |
-o-transition: all .15s ease-out; | |
transition: all .15s ease-out; | |
} | |
.button-dark .top .label { | |
color: #fff; | |
} | |
.button:hover .bottom { | |
left: 0; | |
top: 0; | |
background-color: #f3f3f3; | |
} | |
.button:hover .top .label { | |
color: #2acdc1; | |
} | |
.button-border { | |
position: absolute; | |
background-color: #2acdc1; | |
-webkit-transition: all .25s ease-out; | |
-moz-transition: all .25s ease-out; | |
-o-transition: all .25s ease-out; | |
transition: all .25s ease-out; | |
} | |
.button:hover .top .button-border-left,.button:hover .top .button-border-right { | |
height: calc(100% + 2px); | |
} | |
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom { | |
width: calc(100% + 2px); | |
} | |
.button-border-left { | |
left: -2px; | |
bottom: -2px; | |
width: 2px; | |
height: 0; | |
} | |
.button-border-top { | |
left: -2px; | |
top: -2px; | |
width: 0; | |
height: 2px; | |
} | |
.button-border-right { | |
right: -2px; | |
top: -2px; | |
width: 2px; | |
height: 0; | |
} | |
.button-border-bottom { | |
right: -2px; | |
bottom: -2px; | |
width: 0; | |
height: 2px; | |
} |