button as seen on http://vibeasy.com/?play
A Pen by Saijo George on CodePen.
button as seen on http://vibeasy.com/?play
A Pen by Saijo George on CodePen.
<label for="switch" class="button"><a href="https://codemyui.com/">CodeMyUI.com</a></label> |
.stretch, .button:after, .button:before { | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
} | |
.button { | |
background: #0962EA; | |
background-size: 100%; | |
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #0962EA), color-stop(100%, #0AA0F6)); | |
background-image: -moz-linear-gradient(left, #0962EA, #0AA0F6); | |
background-image: -webkit-linear-gradient(left, #0962EA, #0AA0F6); | |
background-image: linear-gradient(to right, #0962EA, #0AA0F6); | |
-moz-border-radius: 1.5em; | |
-webkit-border-radius: 1.5em; | |
border-radius: 1.5em; | |
-moz-transition: opacity 300ms; | |
-o-transition: opacity 300ms; | |
-webkit-transition: opacity 300ms; | |
transition: opacity 300ms; | |
border: none; | |
padding: 20px; | |
color: #FAF15D; | |
font-weight: bold; | |
letter-spacing: 0.05em; | |
outline: none; | |
overflow: hidden; | |
position: absolute; | |
cursor: pointer; | |
z-index: 99; | |
} | |
.button:after { | |
-moz-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px; | |
-webkit-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px; | |
box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px; | |
background: #FAF15D; | |
content: ""; | |
height: 2px; | |
opacity: 0; | |
} | |
.button:before { | |
content: ""; | |
opacity: 0; | |
} | |
.button:hover { | |
-webkit-animation: glitch 750ms infinite; | |
} | |
.button:hover:before { | |
opacity: 1; | |
} | |
.button:hover:after { | |
-webkit-animation: scan 2s infinite; | |
opacity: 1; | |
} | |
@-webkit-keyframes glitch { | |
0% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
} | |
5% { | |
-moz-transform: skewX(2deg); | |
-ms-transform: skewX(2deg); | |
-webkit-transform: skewX(2deg); | |
transform: skewX(2deg); | |
opacity: 0.75; | |
} | |
10% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
opacity: 1; | |
} | |
15% { | |
-moz-transform: skewX(-5deg); | |
-ms-transform: skewX(-5deg); | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 0.75; | |
} | |
20% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
opacity: 1; | |
} | |
45% { | |
-moz-transform: skewX(3deg); | |
-ms-transform: skewX(3deg); | |
-webkit-transform: skewX(3deg); | |
transform: skewX(3deg); | |
opacity: 0.75; | |
} | |
50% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
opacity: 1; | |
} | |
55% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
opacity: 0.75; | |
} | |
60% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
opacity: 1; | |
} | |
75% { | |
-moz-transform: skewX(2deg); | |
-ms-transform: skewX(2deg); | |
-webkit-transform: skewX(2deg); | |
transform: skewX(2deg); | |
} | |
80% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
} | |
85% { | |
-moz-transform: skewX(-8deg); | |
-ms-transform: skewX(-8deg); | |
-webkit-transform: skewX(-8deg); | |
transform: skewX(-8deg); | |
opacity: 0.75; | |
} | |
90% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
opacity: 1; | |
} | |
100% { | |
-moz-transform: skewX(0deg); | |
-ms-transform: skewX(0deg); | |
-webkit-transform: skewX(0deg); | |
transform: skewX(0deg); | |
} | |
} | |
@-webkit-keyframes scan { | |
0% { | |
top: 0%; | |
} | |
50% { | |
top: 97%; | |
} | |
100% { | |
top: 0%; | |
} | |
} | |
a:link, a:visited | |
{ | |
color: white; | |
text-decoration: none; | |
} |
It looks great, but I can't click on the link inside the button ^^
This is nice!