css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
html, body {
height: 100%;
}
html {
font-size: 62.5%;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.sepa {
width: 90%;
height: 1px;
margin: 0px auto;
border-top: 1px dashed #ecf0f1;
}
.noselect {
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pause-anim {
-webkit-animation-play-state: paused !important;
animation-play-state: paused !important;
}
@-webkit-keyframes svg_outline {
100% {
stroke-dashoffset: 0;
}
}
@keyframes svg_outline {
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes svg_outline_hide {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
stroke-width: 0;
}
}
@keyframes svg_outline_hide {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
stroke-width: 0;
}
}
@-webkit-keyframes svg_fill_active {
100% {
fill: #e25027;
fill-opacity: 1;
}
}
@keyframes svg_fill_active {
100% {
fill: #e25027;
fill-opacity: 1;
}
}
@-webkit-keyframes svg_fill_inactive {
100% {
fill: #ebebeb;
fill-opacity: 1;
}
}
@keyframes svg_fill_inactive {
100% {
fill: #ebebeb;
fill-opacity: 1;
}
}
@-webkit-keyframes svg_stroke_inactive {
100% {
stroke: #ebebeb;
}
}
@keyframes svg_stroke_inactive {
100% {
stroke: #ebebeb;
}
}
@-webkit-keyframes svg_stroke_active {
100% {
stroke: #e25027;
}
}
@keyframes svg_stroke_active {
100% {
stroke: #e25027;
}
}
body {
font-family: 'Electrolize', sans-serif;
background: #070707;
overflow: hidden;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.bttn {
display: inline-block;
vertical-align: middle;
position: relative;
margin: 20px;
}
.bttn span {
display: block;
padding: 30px;
font-size: 30px;
color: #FFB902;
text-transform: uppercase;
transition: all 0.3s ease-out;
}
.bttn:hover {
cursor: pointer;
}
.bttn.out .corners {
position: absolute;
width: 100%;
transition-duration: 0.3s;
}
.bttn.out .corners:before, .bttn.out .corners:after {
content: '';
position: absolute;
width: 7px;
height: 7px;
border-color: cyan;
border-style: solid;
transition-duration: 0.3s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.bttn.out .corners.top:before {
border-width: 1px 0 0 1px;
}
.bttn.out .corners.top:after {
border-width: 1px 1px 0 0;
}
.bttn.out .corners.bottom:before {
border-width: 0 0 1px 1px;
}
.bttn.out .corners.bottom:after {
border-width: 0 1px 1px 0;
}
.bttn.out .corners:before {
left: 0;
}
.bttn.out .corners:after {
right: 0;
}
.bttn.out .corners.top {
top: 0;
}
.bttn.out .corners.bottom {
bottom: 7px;
}
.bttn.out:hover .corners:before {
left: 20px;
}
.bttn.out:hover .corners:after {
right: 20px;
}
.bttn.out:hover .corners.top {
top: 20px;
}
.bttn.out:hover .corners.bottom {
bottom: 27px;
}
.bttn.in .corners {
position: absolute;
width: 100%;
transition-duration: 0.3s;
}
.bttn.in .corners:before, .bttn.in .corners:after {
content: '';
position: absolute;
width: 7px;
height: 7px;
border-color: #FFB902;
border-style: solid;
transition-duration: 0.3s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.bttn.in .corners.top:before {
border-width: 1px 0 0 1px;
}
.bttn.in .corners.top:after {
border-width: 1px 1px 0 0;
}
.bttn.in .corners.bottom:before {
border-width: 0 0 1px 1px;
}
.bttn.in .corners.bottom:after {
border-width: 0 1px 1px 0;
}
.bttn.in .corners:before {
left: 20px;
}
.bttn.in .corners:after {
right: 20px;
}
.bttn.in .corners.top {
top: 20px;
}
.bttn.in .corners.bottom {
bottom: 27px;
}
.bttn.in:hover .corners:before {
left: 0;
}
.bttn.in:hover .corners:after {
right: 0;
}
.bttn.in:hover .corners.top {
top: 0;
}
.bttn.in:hover .corners.bottom {
bottom: 7px;
}
.bttn.cyan span {
color: cyan;
}
.bttn.cyan .corners:after, .bttn.cyan .corners:before {
border-color: cyan;
}
.box {
display: inline-block;
vertical-align: middle;
position: relative;
max-width: 20%;
}
.box .content {
margin: 20px;
padding: 20px;
border: 1px dashed rgba(0, 255, 255, 0.5);
color: cyan;
font-size: 14px;
line-height: 1.3;
}
.box .corners {
position: absolute;
width: 100%;
transition-duration: 0.3s;
}
.box .corners:before, .box .corners:after {
content: '';
position: absolute;
width: 7px;
height: 7px;
border-color: cyan;
border-style: solid;
transition-duration: 0.3s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.box .corners.top:before {
border-width: 1px 0 0 1px;
}
.box .corners.top:after {
border-width: 1px 1px 0 0;
}
.box .corners.bottom:before {
border-width: 0 0 1px 1px;
}
.box .corners.bottom:after {
border-width: 0 1px 1px 0;
}
.box .corners:before {
left: 0;
}
.box .corners:after {
right: 0;
}
.box .corners.top {
top: 0;
}
.box .corners.bottom {
bottom: 7px;
}
.box:hover .corners:before {
left: 20px;
}
.box:hover .corners:after {
right: 20px;
}
.box:hover .corners.top {
top: 20px;
}
.box:hover .corners.bottom {
bottom: 27px;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}