<div class="container">
<button>
<span>Zoom Corners</span>
<div class="zoom-corners top-corners"></div>
<div class="zoom-corners bottom-corners"></div>
</button>
<button style="overflow: hidden;">
<span>Corner Cover</span>
<div class="corner-cover"></div>
</button>
<button>
<span>Grow Corners</span>
<div class="grow-corners top-corners"></div>
<div class="grow-corners bottom-corners"></div>
</button>
<button>
<span>Shrink</span>
<div class="shrink"></div>
</button>
<button>
<span>Blink</span>
<div class="blink"></div>
</button>
<button>
<span>Glow Bar</span>
<div class="glow-bar"></div>
</button>
<button>
<span>Spiral</span>
<div class="spiral-top"></div>
<div class="spiral-bottom"></div>
</button>
<button>
<span>Diagonal Fade</span>
<div class="diagonal-fade"></div>
</button>
<button>
<span>Corner Flip</span>
<div class="corner-flip-inside"></div>
<div class="corner-flip"></div>
</button>
<button>
<span>Doppler</span>
<div class="doppler"></div>
</button>
<button>
<span>Framed</span>
<div class="framed-top"></div>
<div class="framed-bottom"></div>
</button>
<button>
<span>Plus Corners</span>
<div class="spin">
<div class="plus top-corners"></div>
<div class="plus bottom-corners"></div>
</div>
</button>
<button>
<span>Wipe</span>
<div class="wipe"></div>
</button>
<button>
</button>
<button>
</button>
<button>
</button>
</div>
* {
box-sizing: border-box;
}
body {
background: #3c3c3c;
}
span {
color: #fff;
font-size: 15px;
text-transform: uppercase;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.container {
width: 100%;
height: 100vh;
padding: 30px;
display: flex;
display: webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: space-between;
}
button {
background: rgba(0,0,0,.3);
width: 200px;
height: 200px;
position: relative;
border: none;
cursor: pointer;
margin: 15px;
}
button:focus {
border: none;
box-shadow: none;
}
/* -----------------------------
-------BUTTON 1 STYLES----------
----------------------------- */
.zoom-corners::before, .zoom-corners::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-color: #00edff;
border-style: solid;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.zoom-corners.bottom-corners::before {
border-width: 0 0 1px 1px;
left: 25px;
bottom: 25px;
}
.zoom-corners.bottom-corners::after {
border-width: 0 1px 1px 0;
right: 25px;
bottom: 25px;
}
.zoom-corners.top-corners::before {
border-width: 1px 0 0 1px;
left: 25px;
top: 25px;
}
.zoom-corners.top-corners::after {
border-width: 1px 1px 0 0;
right: 25px;
top: 25px;
}
button:hover .zoom-corners.top-corners::before{
top: 0px;
left: 0px;
}
button:hover .zoom-corners.top-corners::after{
top: 0px;
right: 0px;
}
button:hover .zoom-corners.bottom-corners::before{
bottom: 0px;
left: 0px;
}
button:hover .zoom-corners.bottom-corners::after{
bottom: 0px;
right: 0px;
}
/* -----------------------------
-------BUTTON 2 STYLES----------
----------------------------- */
.corner-cover {
position: absolute;
width: 100px;
height: 100px;
right: -55px;
bottom: -55px;
background-color: #00edff;
background-size: cover;
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
button:hover
.corner-cover {
right: 0px;
bottom: 0px;
}
/* -----------------------------
-------BUTTON 3 STYLES----------
----------------------------- */
.grow-corners::before, .grow-corners::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-color: #00edff;
border-style: solid;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.grow-corners.bottom-corners::before {
border-width: 0 0 1px 1px;
left: 0;
bottom: 0;
}
.grow-corners.bottom-corners::after {
border-width: 0 1px 1px 0;
right: 0;
bottom: 0;
}
.grow-corners.top-corners::before {
border-width: 1px 0 0 1px;
left: 0;
top: 0;
}
.grow-corners.top-corners::after {
border-width: 1px 1px 0 0;
right: 0;
top: 0;
}
button:hover
.grow-corners::before {
width: 50px;
height: 50px;
}
button:hover
.grow-corners::after {
width: 50px;
height: 50px;
}
/* -----------------------------
-------BUTTON 4 STYLES----------
----------------------------- */
.shrink {
width: 200px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
border-color: #00edff;
border-style: solid;
border-width: 0px;
opacity: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
button:hover
.shrink {
border-width: 100px;
opacity: 1;
}
/* -----------------------------
-------BUTTON 5 STYLES----------
----------------------------- */
.blink {
width: 200px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
border-color: #00edff;
border-style: solid;
border-width: 1px;
opacity: 0;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
@keyframes blink {
0% { opacity: 1; }
2% { opacity: 0; }
4% { opacity: 1; }
6% { opacity: 0; }
15% { opacity: 1; }
16% { opacity: 0; }
17% { opacity: 1; }
18% { opacity: 0; }
30% { opacity: 1; }
31% { opacity: 0; }
50% { opacity: 1; }
52% { opacity: 0; }
54% { opacity: 1; }
70% { opacity: 0; }
71% { opacity: 1; }
72% { opacity: 0; }
73% { opacity: 1; }
74% { opacity: 0; }
}
@-webkit-keyframes blink {
0% { opacity: 1; }
2% { opacity: 0; }
4% { opacity: 1; }
6% { opacity: 0; }
15% { opacity: 1; }
16% { opacity: 0; }
17% { opacity: 1; }
18% { opacity: 0; }
30% { opacity: 1; }
31% { opacity: 0; }
50% { opacity: 1; }
52% { opacity: 0; }
54% { opacity: 1; }
70% { opacity: 0; }
71% { opacity: 1; }
72% { opacity: 0; }
73% { opacity: 1; }
74% { opacity: 0; }
}
button:hover
.blink {
animation: blink 2.5s step-start 0s infinite;
-webkit-animation: blink 2.5s step-start 0s infinite;
}
/* -----------------------------
-------BUTTON 6 STYLES----------
----------------------------- */
.glow-bar {
background: #00edff;
position: absolute;
bottom: 0px;
left: 0px;
width: 0px;
height: 1px;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
button:hover
.glow-bar {
width: 200px;
}
/* -----------------------------
-------BUTTON 7 STYLES----------
----------------------------- */
.spiral-top::before,
.spiral-top::after,
.spiral-bottom::before,
.spiral-bottom::after {
content: " ";
background: #00edff;
position: absolute;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.spiral-top::before {
top: 0px;
left: 0px;
width: 1px;
height: 0px;
}
.spiral-top::after {
top: 0px;
right: 0px;
width: 0px;
height: 1px;
}
.spiral-bottom::before {
bottom: 0px;
left: 0px;
width: 0px;
height: 1px;
}
.spiral-bottom::after {
bottom: 0px;
right: 0px;
width: 1px;
height: 0px;
}
button:hover
.spiral-top::before {
height: 200px;
}
button:hover
.spiral-top::after {
width: 200px;
}
button:hover
.spiral-bottom::before {
width: 200px;
}
button:hover
.spiral-bottom::after {
height: 200px;
}
/* -----------------------------
-------BUTTON 8 STYLES----------
----------------------------- */
.diagonal-fade::before,
.diagonal-fade::after {
content: " ";
background: #00edff;
width: 200px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.diagonal-fade::before {
left: -20px;
top: 20px;
}
.diagonal-fade::after {
left: 20px;
top: -20px;
}
button:hover
.diagonal-fade::before {
opacity: .5;
left: 0;
top: 0;
}
button:hover
.diagonal-fade::after {
opacity: .5;
left: 0;
top: 0;
}
/* -----------------------------
-------BUTTON 9 STYLES----------
----------------------------- */
.corner-flip {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-webkit-clip-path: polygon(100% 100%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(100% 100%, 100% 0, 100% 100%, 0% 100%);
background-color: #00edff;
background-size: cover;
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.corner-flip-inside {
background-color: #e3e3e3;
background-size: cover;
width: 200px;
height: 200px;
position: absolute;
right: 0px;
bottom: 0px;
opacity: 0;
-webkit-clip-path: polygon(100% 100%, 100% 0, 0% 100%);
clip-path: polygon(100% 100%, 100% 0, 0% 100%);
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
button:hover
.corner-flip {
-webkit-clip-path: polygon(100% 100%, 100% 0, 0 0, 0% 100%);
clip-path: polygon(100% 100%, 100% 0, 0 0, 0% 100%);
}
button:hover
.corner-flip-inside {
opacity: .2;
}
/* -----------------------------
-------BUTTON 10 STYLES---------
----------------------------- */
.doppler {
content: " ";
width: 200px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
border-color: #00edff;
border-style: solid;
border-width: 1px;
opacity: 0;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
@keyframes doppler {
50% { opacity: 1; }
100% { opacity: 0; width: 170px; height: 170px; top: 15px; left: 15px; }
}
@-webkit-keyframes doppler {
10% { opacity: 1; }
100% { opacity: 0; width: 170px; height: 170px; top: 15px; left: 15px; }
}
button:hover
.doppler {
animation: doppler 1s linear 0s infinite;
-webkit-animation: doppler 1s linear 0s infinite;
}
/* -----------------------------
-------BUTTON 11 STYLES---------
----------------------------- */
.framed-top::before,
.framed-top::after,
.framed-bottom::before,
.framed-bottom::after {
content: " ";
background: #00edff;
position: absolute;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.framed-top::before {
top: 0px;
left: 15px;
width: 1px;
height: 0px;
}
.framed-top::after {
top: 15px;
right: 0px;
width: 0px;
height: 1px;
}
.framed-bottom::before {
bottom: 15px;
left: 0px;
width: 0px;
height: 1px;
}
.framed-bottom::after {
bottom: 0px;
right: 15px;
width: 1px;
height: 0px;
}
button:hover
.framed-top::before {
height: 200px;
}
button:hover
.framed-top::after {
width: 200px;
}
button:hover
.framed-bottom::before {
width: 200px;
}
button:hover
.framed-bottom::after {
height: 200px;
}
/* -----------------------------
-------BUTTON 12 STYLES---------
----------------------------- */
.plus::before, .plus::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-color: #00edff;
border-style: solid;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.plus.bottom-corners::before {
border-width: 0 0 1px 1px;
left: 25px;
bottom: 25px;
}
.plus.bottom-corners::after {
border-width: 0 1px 1px 0;
right: 25px;
bottom: 25px;
}
.plus.top-corners::before {
border-width: 1px 0 0 1px;
left: 25px;
top: 25px;
}
.plus.top-corners::after {
border-width: 1px 1px 0 0;
right: 25px;
top: 25px;
}
button:hover .plus.top-corners::before{
top: 100px;
left: 100px;
}
button:hover .plus.top-corners::after{
top: 100px;
right: 100px;
}
button:hover .plus.bottom-corners::before{
bottom: 100px;
left: 100px;
}
button:hover .plus.bottom-corners::after{
bottom: 100px;
right: 100px;
}
button:hover
span {
opacity: 0;
}
.spin {
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
button:hover
.spin {
transform: rotate(90deg);
}
/* -----------------------------
-------BUTTON 13 STYLES---------
----------------------------- */
.wipe::before,
.wipe::after {
content: " ";
background: #00edff;
width: 0px;
height: 100px;
position: absolute;
-webkit-box-shadow: 0 0 7px 0 #00edff;
box-shadow: 0 0 7px 0 #00edff;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.wipe::before {
left: 0px;
top: 0px;
}
.wipe::after {
right: 0px;
bottom: 0px;
}
button:hover
.wipe::before {
width: 200px;
}
button:hover
.wipe::after {
width: 200px;
}
// Made by Nick Merritt
// nick-merritt.com
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.