Skip to content

Instantly share code, notes, and snippets.

@AnoRebel

AnoRebel/anim_submit.js

Created October 15, 2022 18:47
Show Gist options
  • Save AnoRebel/a51f7fbc21e14a722459e02fee83f132 to your computer and use it in GitHub Desktop.
Save AnoRebel/a51f7fbc21e14a722459e02fee83f132 to your computer and use it in GitHub Desktop.
Download ZIP
A collection of button effects in html, css, javascript
Raw
anim_submit.js
$(function() {
$( "#button" ).click(function() {
$( "#button" ).addClass( "onclic", 250, validate);
});
function validate() {
setTimeout(function() {
$( "#button" ).removeClass( "onclic" );
$( "#button" ).addClass( "validate", 450, callback );
}, 2250 );
}
function callback() {
setTimeout(function() {
$( "#button" ).removeClass( "validate" );
}, 1250 );
}
});
Raw
anim_submit.scss
$green: #1ECD97;
$gray: #bbbbbb;
* {
font-family: 'Roboto', sans-serif;
}
.container {
position: absolute;
top:50%;
left:50%;
margin-left: -65px;
margin-top: -20px;
width: 130px;
height: 40px;
text-align: center;
}
button {
outline:none;
height: 40px;
text-align: center;
width: 130px;
border-radius:40px;
background: #fff;
border: 2px solid $green;
color:$green;
letter-spacing:1px;
text-shadow:0;
font:{
size:12px;
weight:bold;
}
cursor: pointer;
transition: all 0.25s ease;
&:hover {
color:white;
background: $green;
}
&:active {
//letter-spacing: 2px;
letter-spacing: 2px ;
}
&:after {
content:"SUBMIT";
}
}
.onclic {
width: 40px;
border-color:$gray;
border-width:3px;
font-size:0;
border-left-color:$green;
animation: rotating 2s 0.25s linear infinite;
&:after {
content:"";
}
&:hover {
color:$green;
background: white;
}
}
.validate {
font-size:13px;
color: white;
background: $green;
&:after {
font-family:'FontAwesome';
content:"\f00c";
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Raw
anim_submit_button.html
<div class="container">
<button id="button"></button>
</div>
Raw
animated.css
html {
background-color: #333;
transition: 0.5s;
}
h1 {
font-family: Marvel;
font-size: 50pt;
margin-top: 15px;
line-height: 50pt;
transition: 0.5s;
color: #bbb;
}
h6 {
font-family: Marvel;
font-size: 20pt;
text-align: center;
margin-top: -25px;
margin-bottom: 15px;
line-height: 20px;
padding: none;
transition: 0.5s;
color: #bbb;
}
button {
cursor: pointer;
letter-spacing: 2px;
text-transform: uppercase;
font-family: Marvel;
font-size: 20pt;
width: 200px;
height: 45px;
position: relative;
border: solid #bbb 2px;
color: #bbb;
z-index: 1;
transition: all 0.5s ease-in-out;
border-radius: 5px;
margin: 5px;
}
button:focus {
outline: none;
}
.button-container {
width: 852px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
h4 {
padding: 0px;
line-height: .1;
margin: 13px;
}
a {
color: red;
text-decoration: none;
background: #f1f1f1;
padding-left: 5px;
padding-right: 5px;
border-radius: 15px;
transition: all 0.3s ease-in-out;
}
a:hover {
color: #f1f1f1;
background-color: red
}
#footer {
position: relative;
top: 4px;
padding-bottom: 0px;
text-align: center;
font-family: Marvel;
font-size: 13pt;
color: #f1f1f1;
line-height: 1;
width: 99%;
}
@media screen and (max-width: 880px) {
.button-container {
width: 424px;
}
}
@media screen and (max-width: 445px) {
.button-container {
width: 200px;
}
}
.btn-1 {
background: #333;
padding: 0;
}
.btn-1 span {
position: relative;
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
transition: 0.5s ease-in-out;
}
.btn-1:before,
.btn-1:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: red;
transition: all 0.5s ease-in-out;
}
.btn-1:before {
height: 0%;
width: 2px;
top: 50%;
}
.btn-1:after {
width: 0%;
height: 2px;
left: 50%;
}
.btn-1:hover:before {
height: 100%;
top: 0%;
background: red;
}
.btn-1:hover:after {
width: 100%;
left: 0%;
background: red;
}
.btn-1:hover {
background: transparent;
border-color: #333;
}
.btn-1 span:hover {
color: red;
}
.btn-1 span:before,
.btn-1 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #333;
transition: all 0.5s ease-in-out;
}
.btn-1 span:before {
width: 2px;
height: 0%;
top: 50%;
}
.btn-1 span:after {
height: 2px;
width: 0%;
left: 50%;
}
.btn-1 span:hover:before {
height: 41px;
top: 0%;
background: red;
}
.btn-1 span:hover:after {
width: 100%;
left: 0%;
background: red;
}
.btn-1:active {
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-1:active:before,
.btn-1:active:after {
background-color: #00a7fc;
}
.btn-1 span:active {
color: #333;
}
.btn-1 span:active:before,
.btn-1 span:active:after {
background-color: #00a7fc;
}
.btn-2 {
background-image: -webkit-linear-gradient(30deg, transparent 50%, red 50%);
background-image: linear-gradient(30deg, transparent 50%, red 50%);
background-size: 298%;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0%;
}
.btn-2:hover {
background-position: 100%;
color: #f1f1f1;
border-color: red;
}
.btn-2:active {
background-color: #00a7fc;
color: #333;
background-position: 0%;
border-color: #00a7fc;
}
.btn-3 {
background: #333;
}
.btn-3:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: red;
transform: scale(0);
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-3:hover:before {
transform: scale(1);
}
.btn-3:hover {
color: #f1f1f1;
border-color: red;
}
.btn-3:active:before {
background-color: #00a7fc;
}
.btn-3:active {
border-color: #00a7fc;
color: #333;
background-color: #00a7fc;
}
.btn-4 {
background: red;
}
.btn-4:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #333;
transform: scale(1);
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-4:hover:before {
transform: scale(0);
}
.btn-4:hover {
color: #f1f1f1;
border-color: red;
}
.btn-4:active {
border-color: #00a7fc;
color: #333;
background-color: #00a7fc;
}
.btn-4:active:before {
background-color: #00a7fc;
}
.btn-5 {
background: #333;
}
.btn-5:before {
content: "";
width: 0%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: red;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-5:hover:before {
width: 100%;
}
.btn-5:hover {
color: #f1f1f1;
border-color: red;
}
.btn-5:active:before {
background-color: #00a7fc;
}
.btn-5:active {
border-color: #00a7fc;
background-color: #00a7fc;
color: #333;
}
.btn-6 {
background: #333;
}
.btn-6:before {
content: "";
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-6:hover:before {
width: 100%;
}
.btn-6:hover {
color: #f1f1f1;
border-color: red;
}
.btn-6:active:before {
background-color: #00a7fc;
}
.btn-6:active {
border-color: #00a7fc;
background-color: #00a7fc;
color: #333;
}
.btn-7 {
background: #333;
}
.btn-7:before {
content: "";
width: 100%;
height: 0%;
position: absolute;
top: 0;
right: 0;
background-color: red;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-7:hover:before {
height: 100%;
}
.btn-7:hover {
color: #f1f1f1;
border-color: red;
}
.btn-7:active:before {
background-color: #00a7fc;
}
.btn-7:active {
border-color: #00a7fc;
background-color: #00a7fc;
color: #333;
}
.btn-8 {
background: #333;
}
.btn-8:before {
content: "";
width: 100%;
height: 0%;
position: absolute;
bottom: 0;
right: 0;
background-color: red;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-8:hover:before {
height: 100%;
}
.btn-8:hover {
color: #f1f1f1;
border-color: red;
}
.btn-8:active:before {
background-color: #00a7fc;
}
.btn-8:active {
border-color: #00a7fc;
background-color: #00a7fc;
color: #333;
}
.btn-9 {
background: #333;
}
.btn-9:before {
content: "";
width: 0%;
height: 100%;
position: absolute;
top: 0;
right: 50%;
background-color: red;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-9:hover:before {
width: 100%;
right: 0%;
}
.btn-9:hover {
color: #f1f1f1;
border-color: red;
}
.btn-9:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-9:active:before {
background-color: #00a7fc;
}
.btn-10 {
background: red;
}
.btn-10:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0%;
background-color: #333;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-10:hover:before {
width: 0%;
right: 50%;
}
.btn-10:hover {
color: #f1f1f1;
border-color: red;
}
.btn-10:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-10:active:before {
background-color: #00a7fc;
}
.btn-11 {
background: #333;
}
.btn-11:before {
content: "";
width: 100%;
height: 0%;
position: absolute;
top: 50%;
right: 0%;
background-color: red;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-11:hover:before {
height: 100%;
top: 0%;
}
.btn-11:hover {
color: #f1f1f1;
border-color: red;
}
.btn-11:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-11:active:before {
background-color: #00a7fc;
}
.btn-12 {
background: red;
}
.btn-12:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0%;
right: 0%;
background-color: #333;
transition: 0.5s ease-in-out;
z-index: -1;
}
.btn-12:hover:before {
height: 0%;
top: 50%;
}
.btn-12:hover {
color: #f1f1f1;
border-color: red;
}
.btn-12:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-12:active:before {
background-color: #00a7fc;
}
.btn-13 {
background-color: #333;
}
.btn-13:hover {
color: #f1f1f1;
border-color: red;
}
.btn-13:hover:before {
left: 0%;
right: auto;
width: 100%;
}
.btn-13:before {
position: absolute;
top: 0px;
right: 0px;
width: 0%;
height: 100%;
z-index: -1;
content: "";
color: #f1f1f1;
background: red;
transition: all 500ms ease-in-out;
}
.btn-13:active:before {
background-color: #00a7fc;
}
.btn-13:active {
color: #333;
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-14 {
background-color: #333;
}
.btn-14:hover {
color: #f1f1f1;
border-color: red;
}
.btn-14:hover:before {
right: 0%;
left: auto;
width: 100%;
}
.btn-14:before {
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
z-index: -1;
content: "";
color: #f1f1f1;
background: red;
transition: all 500ms ease-in-out;
}
.btn-14:active:before {
background-color: #00a7fc;
}
.btn-14:active {
color: #333;
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-15 {
background-color: #333;
}
.btn-15:hover {
color: #f1f1f1;
border-color: red;
}
.btn-15:hover:before {
bottom: 0%;
top: auto;
height: 100%;
}
.btn-15:before {
position: absolute;
top: 0px;
left: 0px;
height: 0%;
width: 100%;
z-index: -1;
content: "";
color: #f1f1f1;
background: red;
transition: all 500ms ease-in-out;
}
.btn-15:active:before {
background-color: #00a7fc;
}
.btn-15:active {
color: #333;
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-16 {
background-color: #333;
}
.btn-16:hover {
color: #f1f1f1;
border-color: red;
}
.btn-16:hover:before {
top: 0%;
bottom: auto;
height: 100%;
}
.btn-16:before {
position: absolute;
bottom: 0px;
left: 0px;
height: 0%;
width: 100%;
z-index: -1;
content: "";
color: #f1f1f1;
background: red;
transition: all 500ms ease-in-out;
}
.btn-16:active:before {
background-color: #00a7fc;
}
.btn-16:active {
color: #333;
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-17 {
background: #333;
overflow: hidden;
transition: all 0.3s ease-in-out 0s;
}
.btn-17:before {
content: "";
height: 0%;
width: 0%;
background: red;
position: absolute;
top: 50%;
right: 50%;
border-radius: 20px;
z-index: -1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transform: translateX(50%) translateY(-50%) rotate(-45deg);
}
.btn-17:hover:before {
animation: btn-17 2s;
background-color: red;
}
.btn-17:hover {
color: #f1f1f1;
border-color: red;
background-color: red;
transition: background-color 0.5s ease-in-out 0.8s;
}
@keyframes btn-17 {
0% {
height: 0%;
width: 0%;
}
25% {
height: 250%;
width: 600%;
}
50% {
height: 600%;
width: 600%;
}
75% {
height: 100%;
width: 600%;
}
100% {
height: 0%;
width: 0%;
}
}
.btn-18 {
background: #333;
overflow: hidden;
transition: all 0.3s ease-in-out 0s;
}
.btn-18:before {
content: "";
height: 0%;
width: 0%;
background: red;
position: absolute;
top: 50%;
right: 50%;
border-radius: 20px;
z-index: -1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transform: translateX(50%) translateY(-50%) rotate(45deg);
}
.btn-18:hover:before {
animation: btn-18 2s;
background-color: red;
}
.btn-18:hover {
color: #f1f1f1;
border-color: red;
background-color: red;
transition: background-color 0.5s ease-in-out 0.8s;
}
@keyframes btn-18 {
0% {
height: 0%;
width: 0%;
}
25% {
height: 250%;
width: 600%;
}
50% {
height: 600%;
width: 600%;
}
75% {
height: 100%;
width: 600%;
}
100% {
height: 0%;
width: 0%;
}
}
.btn-19 {
overflow: hidden;
background: #333;
}
.btn-19:before {
content: "";
position: absolute;
background: red;
width: 0%;
height: 0%;
border-radius: 50%;
z-index: -1;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
}
.btn-19:hover:before {
width: 110%;
height: 300px;
}
.btn-19:hover {
color: #f1f1f1;
border-color: red;
}
.btn-19:active:before {
background-color: #00a7fc;
}
.btn-19:active {
color: #333;
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-20 {
overflow: hidden;
background-color: red;
}
.btn-20:before {
content: "";
position: absolute;
background: #333;
width: 110%;
height: 300px;
border-radius: 50%;
z-index: -1;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
}
.btn-20:hover:before {
width: 0%;
height: 0%;
}
.btn-20:hover {
color: #f1f1f1;
border-color: red;
}
.btn-20:active:before {
background-color: #00a7fc;
}
.btn-20:active {
color: #333;
background-color: #00a7fc;
border-color: #00a7fc;
}
.btn-21 {
cursor: pointer;
letter-spacing: 2px;
text-transform: uppercase;
font-family: Marvel;
font-size: 20pt;
width: 200px;
height: 45px;
position: relative;
color: #bbb;
z-index: 1;
transition: all 0.5s ease-in-out;
border-radius: 0px;
margin: 5px;
background: transparent;
padding: 0;
overflow: hidden;
border: none;
}
.btn-21:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, transparent, #bbb);
animation: btn-21-left 2s linear infinite;
transition: 0.5s ease-in-out;
}
.btn-21:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, transparent, #bbb);
animation: btn-21-top 2s linear infinite;
animation-delay: 1s;
transform: translateY(-100%);
}
.btn-21 span {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 6px;
}
.btn-21 span:after {
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #bbb);
animation: btn-21-right 2s linear infinite;
}
.btn-21 span:before {
content: "";
position: absolute;
top: 0px;
right: 12px;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, transparent, #bbb);
animation: btn-22-bottom 2s linear infinite;
animation-delay: 1s;
transform: translateY(-100%)
}
.btn-21:hover:before {
background: linear-gradient(to left, transparent, red);
}
.btn-21:hover:after {
background: linear-gradient(to top, transparent, red);
}
.btn-21 span:hover:before {
background: linear-gradient(to bottom, transparent, red);
}
.btn-21 span:hover:after {
background: linear-gradient(to right, transparent, red);
}
.btn-21:hover {
color: red;
}
.btn-21:active:before {
background: linear-gradient(to left, transparent, #00a7fc);
}
.btn-21:active:after {
background: linear-gradient(to top, transparent, #00a7fc);
}
.btn-21 span:active:before {
background: linear-gradient(to bottom, transparent, #00a7fc);
}
.btn-21 span:active:after {
background: linear-gradient(to right, transparent, #00a7fc);
}
.btn-21:active {
color: #00a7fc;
}
@keyframes btn-21-top {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
@keyframes btn-21-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes btn-21-bottom {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
@keyframes btn-21-right {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn-22 {
cursor: pointer;
letter-spacing: 2px;
text-transform: uppercase;
font-family: Marvel;
font-size: 20pt;
width: 200px;
height: 45px;
position: relative;
color: #bbb;
z-index: 1;
transition: all 0.5s ease-in-out;
border-radius: 0px;
margin: 5px;
background: transparent;
padding: 0;
overflow: hidden;
border: none;
}
.btn-22:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, transparent, #bbb);
animation: btn-22-left 2s linear infinite;
transition: 0.5s ease-in-out;
}
.btn-22:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, transparent, #bbb);
animation: btn-22-top 2s linear infinite;
animation-delay: 1s;
transform: translateY(-100%);
}
.btn-22 span {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 6px;
}
.btn-22 span:after {
content: "";
position: absolute;
bottom: 12px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #bbb);
animation: btn-22-right 2s linear infinite;
}
.btn-22 span:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, transparent, #bbb);
animation: btn-22-bottom 2s linear infinite;
animation-delay: 1s;
transform: translateY(-100%)
}
.btn-22:hover:before {
background: linear-gradient(to left, transparent, red);
}
.btn-22:hover:after {
background: linear-gradient(to top, transparent, red);
}
.btn-22 span:hover:before {
background: linear-gradient(to bottom, transparent, red);
}
.btn-22 span:hover:after {
background: linear-gradient(to right, transparent, red);
}
.btn-22:hover {
color: red;
}
.btn-22:active:before {
background: linear-gradient(to left, transparent, #00a7fc);
}
.btn-22:active:after {
background: linear-gradient(to top, transparent, #00a7fc);
}
.btn-22 span:active:before {
background: linear-gradient(to bottom, transparent, #00a7fc);
}
.btn-22 span:active:after {
background: linear-gradient(to right, transparent, #00a7fc);
}
.btn-22:active {
color: #00a7fc;
}
@keyframes btn-22-top {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
@keyframes btn-22-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes btn-22-bottom {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
@keyframes btn-22-right {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.btn-23 {
overflow: hidden;
background-color: #333;
}
.btn-23:before {
content: "";
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 0%;
background: red;
border-radius: 23px;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-23:hover:before {
width: 120%;
left: -10%;
}
.btn-23:hover {
color: #f1f1f1;
border-color: red;
}
.btn-23:active {
border-color: #00a7fc;
color: #333;
background-color: #00a7fc;
}
.btn-23:active:before {
background-color: #00a7fc;
}
.btn-23:active {
background-color: #00a7fc;
border-color: #00a7fc;
color: #333;
}
.btn-23:active:before {
background-color: #00a7fc;
}
.btn-24 {
background: #f1f1f1;
overflow: hidden;
background-color: red;
}
.btn-24:before {
content: "";
position: absolute;
height: 100%;
top: 0;
width: 120%;
left: -10%;
background-color: #333;
transition: all 0.5s ease-in-out;
border-radius: 23px;
z-index: -1;
}
.btn-24:hover {
color: #f1f1f1;
border-color: red;
}
.btn-24:hover:before {
width: 0%;
left: 50%;
}
.btn-24:active {
background-color: #00a7fc;
border-color: #00a7fc;
color: #333;
}
.btn-24:active:before {
background-color: #00a7fc;
}
.btn-25 {
background: #333;
}
.btn-25:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 0%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-25:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 0%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-25:hover {
color: #f1f1f1;
border-color: red;
}
.btn-25:hover:before,
.btn-25:hover:after {
height: 100%;
}
.btn-25:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-25:active:before,
.btn-25:active:after {
background-color: #00a7fc;
}
.btn-26 {
background: #333;
}
.btn-26:before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 0%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-26:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50%;
height: 0%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-26:hover {
color: #f1f1f1;
border-color: red;
}
.btn-26:hover:before,
.btn-26:hover:after {
height: 100%;
}
.btn-26:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-26:active:before,
.btn-26:active:after {
background-color: #00a7fc;
}
.btn-27 {
background: #333;
}
.btn-27:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 50%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-27:after {
content: "";
position: absolute;
bottom: 0%;
right: 0%;
width: 0%;
height: 50%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-27:hover {
color: #f1f1f1;
border-color: red;
}
.btn-27:hover:before,
.btn-27:hover:after {
width: 100%;
}
.btn-27:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-27:active:before,
.btn-27:active:after {
background-color: #00a7fc;
}
.btn-28 {
background: #333;
}
.btn-28:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 50%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-28:after {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0%;
height: 50%;
background-color: red;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.btn-28:hover {
color: #f1f1f1;
border-color: red;
}
.btn-28:hover:before,
.btn-28:hover:after {
width: 100%;
}
.btn-28:active {
color: #333;
border-color: #00a7fc;
background-color: #00a7fc;
}
.btn-28:active:before,
.btn-28:active:after {
background-color: #00a7fc;
}
/*
Following code is for copying button code
*/
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.3s ease-in-out;
}
.modal-box {
background-color: transparent;
position: absolute;
width: 80%;
height: 80%;
left: 100px;
top: 50px;
}
.close {
position: fixed;
width: auto;
height: auto;
background-color: transparent;
border: none;
padding: 0px;
top: 10px;
right: 10px;
color: #f1f1f1;
cursor: pointer;
}
.content {
position: absolute;
padding: 10px;
background-color: #111;
font-size: 10pt;
font-family: "Nova Mono";
color: #f1f1f1;
overflow: auto;
transition: opacity 0.3s ease-in-out;
border-radius: 0px 25px 25px 25px
}
.content::-webkit-scrollbar {
width: 0;
}
.content::-webkit-scrollbar-track {
background: #111;
}
.content::-webkit-scrollbar-thumb {
background: #666;
}
.content::-webkit-scrollbar-thumb:hover {
background: #888;
}
.modal-box-buttons {
position: relative;
max-height: 50px;
padding: 0px;
background: transparent;
z-index: 100;
}
.modal-box-buttons-button {
width: 100px;
height: 50px;
background: #111;
font-family: "Nova Mono";
font-size: 20pt;
cursor: pointer;
margin-left: 0px;
margin-top: 0px;
border: none;
border-radius: 25px 25px 0px 0px;
margin-right: 0px;
transition: all 0.3s ease-in-out;
color: #f1f1f1;
}
.css {
display: none;
}
#copy-button {
width: 250px;
position: absolute;
bottom: 0px;
}
#copy-button button {
position: relative;
width: 120px;
height: 35px;
font-size: 17pt;
bottom: 0px;
letter-spacing: normal;
padding: 0px;
border: none;
background-color: red;
color: #f1f1f1;
border-radius: 3px;
margin: 0px;
margin-right: 5px;
transition: box-shadow 0.2s ease-in-out, bottom 0.2s ease-in-out;
box-shadow: 0px 0px 10px 1px #000;
}
#copy-button button:hover {
box-shadow: 0px 5px 40px 5px #000;
bottom: 2px;
}
#copy-button button:active {
box-shadow: none;
bottom: 0px;
}
#copy-message {
font-family: Marvel;
font-size: 15pt;
color: #f1f1f1;
position: fixed;
width: 120px;
max-width: 200px;
bottom: 10px;
padding: 10px;
left: -250px;
background-color: red;
transition: all 0.3s ease-in-out;
z-index: 100;
text-align: center;
}
Raw
animated.js
/*
Pure CSS Button Animation
Author: Yohaan Chokhany
The JavaScript code is for the copy functionality ONLY. There is no code for the buttons here. Please click on a button to copy its code.
*/
document.getElementById("btn1").onclick = function() { openModal(1) };
document.getElementById("btn2").onclick = function() { openModal(2) };
document.getElementById("btn3").onclick = function() { openModal(3) };
document.getElementById("btn4").onclick = function() { openModal(4) };
document.getElementById("btn5").onclick = function() { openModal(5) };
document.getElementById("btn6").onclick = function() { openModal(6) };
document.getElementById("btn7").onclick = function() { openModal(7) };
document.getElementById("btn8").onclick = function() { openModal(8) };
document.getElementById("btn9").onclick = function() { openModal(9) };
document.getElementById("btn10").onclick = function() { openModal(10) };
document.getElementById("btn11").onclick = function() { openModal(11) };
document.getElementById("btn12").onclick = function() { openModal(12) };
document.getElementById("btn13").onclick = function() { openModal(13) };
document.getElementById("btn14").onclick = function() { openModal(14) };
document.getElementById("btn15").onclick = function() { openModal(15) };
document.getElementById("btn16").onclick = function() { openModal(16) };
document.getElementById("btn17").onclick = function() { openModal(17) };
document.getElementById("btn18").onclick = function() { openModal(18) };
document.getElementById("btn19").onclick = function() { openModal(19) };
document.getElementById("btn20").onclick = function() { openModal(20) };
document.getElementById("btn21").onclick = function() { openModal(21) };
document.getElementById("btn22").onclick = function() { openModal(22) };
document.getElementById("btn23").onclick = function() { openModal(23) };
document.getElementById("btn24").onclick = function() { openModal(24) };
document.getElementById("btn25").onclick = function() { openModal(25) };
document.getElementById("btn26").onclick = function() { openModal(26) };
document.getElementById("btn27").onclick = function() { openModal(27) };
document.getElementById("btn28").onclick = function() { openModal(28) };
var modal = document.getElementById("modal");
var modalBox = document.getElementById("modal-box");
var modalBoxButtons = document.getElementById("modal-box-buttons");
var copyHTML = document.getElementById("copy-html");
var copyCSS = document.getElementById("copy-css");
var cssButton = document.getElementById("css-button");
var htmlButton = document.getElementById("html-button");
var selected = "HTML";
var modalId;
var content = document.getElementsByClassName("content");
var close = document.getElementById("closeModal");
var copyButton = document.getElementById("copy-button");
var copyTextarea = document.getElementById("copy-textarea");
var copyMessage = document.getElementById("copy-message");
var clicked = false;
window.onclick = function(event) {
if (modal.style.display == "block") {
if (event.target == modal || event.target == modalBoxButtons || event.target == close || event.target == copyButton || event.target == modalBox) {
closeModal();
}
}
}
function openModal(chosenModalId) {
modalId = chosenModalId;
copyHTML.innerHTML = '&lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Marvel"&gt;<br><br>&lt;button class="btn-' + modalId + '"&gt;<br>&nbsp;&nbsp;&lt;span&gt;Click here&lt;/span&gt;<br>&lt;/button&gt;';
copyCSS.innerHTML = '.btn-' + modalId + ' {<br>&nbsp;&nbsp;cursor: pointer;<br>&nbsp;&nbsp;letter-spacing: 2px;<br>&nbsp;&nbsp;text-transform: uppercase;<br>&nbsp;&nbsp;font-family: Marvel;<br>&nbsp;&nbsp;font-size: 20pt;<br>&nbsp;&nbsp;width: 200px;<br>&nbsp;&nbsp;height: 45px;<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;border: solid #777 2px;<br>&nbsp;&nbsp;color: #777;<br>&nbsp;&nbsp;z-index: 1;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 5px;<br>'
if (modalId == 1) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;padding: 0;<br>}<br><br>.btn-1 span {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;padding-top: 5px;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>}<br><br>.btn-1:before, .btn-1:after {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>}<br><br>.btn-1:before {<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;top: 50%;<br>}<br><br>.btn-1:after {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;left: 50%;<br>}<br><br>.btn-1:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;left: 0%;<br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1:hover {<br>&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;border-color: transparent;<br>}<br><br>.btn-1 span:hover {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.btn-1 span:before, .btn-1 span:after {<br>&nbsp;&nbsp;position: absolute;<br>content: "";<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;background: #333;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>}<br><br>.btn-1 span:before {<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;top: 50%;<br>}<br><br>.btn-1 span:after {<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;left: 50%;<br>}<br><br>.btn-1 span:hover:before {<br>&nbsp;&nbsp;height: 41px;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1 span:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;left: 0%; <br>&nbsp;&nbsp;background: red;<br>}<br><br>.btn-1:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}<br><br>.btn-1:active:before, .btn-1:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-1 span:active {<br>&nbsp;&nbsp;color: #333;<br>}<br><br>.btn-1 span:active:before, .btn-1 span:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}'
} else if (modalId == 2) {
copyCSS.innerHTML += '&nbsp;&nbsp;background-image: -webkit-linear-gradient(30deg, transparent 50%, red 50%);<br>&nbsp;&nbsp;background-image: linear-gradient(30deg, transparent 50%, red 50%);<br>&nbsp;&nbsp;background-size: 298%;<br>&nbsp;&nbsp;background-color: transparent;<br>&nbsp;&nbsp;background-repeat: no-repeat;<br>&nbsp;&nbsp;background-position: 0%;<br>}<br><br>.btn-2:hover {<br>&nbsp;&nbsp;background-position: 100%;<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-2:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-position: 0%;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}'
} else if (modalId == 3) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-3:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transform: scale(0);<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-3:hover:before {<br>&nbsp;&nbsp;transform: scale(1);<br>}<br><br>.btn-3:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-3:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-3:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}'
} else if (modalId == 4) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: red;<br>}<br><br>.btn-4:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transform: scale(1);<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-4:hover:before {<br>&nbsp;&nbsp;transform: scale(0);<br>}<br><br>.btn-4:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-4:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-4:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}'
} else if (modalId == 5) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-5:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-5:hover:before {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-5:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-5:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-5:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
} else if (modalId == 6) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-6:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-6:hover:before {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-6:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-6:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-6:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
} else if (modalId == 7) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-7:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-7:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-7:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-7:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-7:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
} else if (modalId == 8) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-8:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-8:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-8:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-8:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-8:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}';
} else if (modalId == 9) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-9:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-9:hover:before {<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;right: 0%;<br>}<br><br>.btn-9:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-9:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br><br>.btn-9:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 10) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: red;<br>}<br><br>.btn-10:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-10:hover:before {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;right: 50%;<br>}<br><br>.btn-10:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-10:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-10:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 11) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-11:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-11:hover:before {<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;top: 0%;<br>}<br><br>.btn-11:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-11:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-11:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 12) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: red;<br>}<br><br>.btn-12:before {<br>&nbsp;&nbsp;content: "";<br >&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-12:hover:before {<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;top: 50%;<br>}<br><br>.btn-12:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-12:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-12:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 13) {
copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-13:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-13:hover:before {<br>&nbsp;&nbsp;left: 0%;<br>&nbsp;&nbsp;right: auto;<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-13:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;right: 0px;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-13:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-13:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
} else if (modalId == 14) {
copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-14:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-14:hover:before {<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;left: auto;<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-14:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;left: 0px;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-14:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-14:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
} else if (modalId == 15) {
copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-15:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-15:hover:before {<br>&nbsp;&nbsp;bottom: 0%;<br>&nbsp;&nbsp;top: auto;<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-15:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;left: 0px;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-15:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-15:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
} else if (modalId == 16) {
copyCSS.innerHTML += '&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-16:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-16:hover:before {<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;bottom: auto;<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-16:before {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0px;<br>&nbsp;&nbsp;left: 0px;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;transition: all 500ms ease-in-out;<br>}<br><br>.btn-16:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-16:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
} else if (modalId == 17) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;transition: all 0.3s ease-in-out 0s;<br>}<br><br>.btn-17:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;right: 50%;<br>&nbsp;&nbsp;border-radius: 20px;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 0.5s ease;<br>&nbsp;&nbsp;-ms-transition: all 0.5s ease;<br>&nbsp;&nbsp;transform: translateX(50%) translateY(-50%) rotate(-45deg);<br>}<br><br>.btn-17:hover:before {<br>&nbsp;&nbsp;animation: btn-17 2s;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-17:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: background-color 0.5s ease-in-out 0.8s;<br>}<br><br>@keyframes btn-17 {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;25% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 250%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 600%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;75% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>}';
} else if (modalId == 18) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;transition: all 0.3s ease-in-out 0s;<br>}<br><br>.btn-18:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;right: 50%;<br>&nbsp;&nbsp;border-radius: 20px;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 0.5s ease;<br>&nbsp;&nbsp;-ms-transition: all 0.5s ease;<br>&nbsp;&nbsp;transform: translateX(50%) translateY(-50%) rotate(45deg);<br>}<br><br>.btn-18:hover:before {<br>&nbsp;&nbsp;animation: btn-18 2s;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-18:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: background-color 0.5s ease-in-out 0.8s;<br>}<br><br>@keyframes btn-18 {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;25% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 250%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 600%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;75% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 600%;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;}<br><br>}';
} else if (modalId == 19) {
copyCSS.innerHTML += '&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-19:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;border-radius: 50%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;left: 50%;<br>&nbsp;&nbsp;transform: translateX(-50%) translateY(-50%);<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 1s ease;<br>&nbsp;&nbsp;-ms-transition: all 1s ease;<br>}<br><br>.btn-19:hover:before {<br>&nbsp;&nbsp;width: 110%;<br>&nbsp;&nbsp;height: 300px;<br>}<br><br>.btn-19:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-19:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-19:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
} else if (modalId == 20) {
copyCSS.innerHTML += '&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-20:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;width: 110%;<br>&nbsp;&nbsp;height: 300px;<br>&nbsp;&nbsp;border-radius: 50%;<br>&nbsp;&nbsp;z-index: -1;<br>&nbsp;&nbsp;top: 50%;<br>&nbsp;&nbsp;left: 50%;<br>&nbsp;&nbsp;transform: translateX(-50%) translateY(-50%);<br>&nbsp;&nbsp;-webkit-transition: all 0.5s ease;<br>&nbsp;&nbsp;-moz-transition: all 1s ease;<br>&nbsp;&nbsp;-ms-transition: all 1s ease;<br>}<br><br>.btn-20:hover:before {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 0%;<br>}<br><br>.btn-20:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-20:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-20:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>}';
} else if (modalId == 21) {
copyCSS.innerHTML = '.btn-21 {<br>&nbsp;&nbsp;cursor: pointer;<br>&nbsp;&nbsp;letter-spacing: 2px;<br>&nbsp;&nbsp;text-transform: uppercase;<br>&nbsp;&nbsp;font-family: Marvel;<br>&nbsp;&nbsp;font-size: 20pt;<br>&nbsp;&nbsp;width: 200px;<br>&nbsp;&nbsp;height: 45px;<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;color: #777;<br>&nbsp;&nbsp;z-index: 1;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 0px;<br>&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;padding: 0;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;border: none;<br>}<br><br>.btn-21:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-right 2s linear infinite;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>}<br><br>.btn-21:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-bottom 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-21 span {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;padding: 4px;<br>}<br><br>.btn-21 span:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-left 2s linear infinite;<br>}<br><br>.btn-21 span:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-21-top 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-21:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, red);<br>}<br><br>.btn-21:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, red);<br>}<br><br>.btn-21 span:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, red);<br>}<br><br>.btn-21 span:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, red);<br>}<br><br>.btn-21:hover {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.btn-21:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #00a7fc);<br>}<br><br>.btn-21:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #00a7fc);<br>}<br><br>.btn-21 span:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #00a7fc);<br>}<br><br>.btn-21 span:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #00a7fc);<br>}<br><br>.btn-21:active {<br>&nbsp;&nbsp;color: #00a7fc;<br>}<br><br>@keyframes btn-21-right {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-21-top {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-21-left {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-21-bottom {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>}';
} else if (modalId == 22) {
copyCSS.innerHTML = '.btn-22 {<br>&nbsp;&nbsp;cursor: pointer;<br>&nbsp;&nbsp;letter-spacing: 2px;<br>&nbsp;&nbsp;text-transform: uppercase;<br>&nbsp;&nbsp;font-family: Marvel;<br>&nbsp;&nbsp;font-size: 20pt;<br>&nbsp;&nbsp;width: 200px;<br>&nbsp;&nbsp;height: 45px;<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;color: #777;<br>&nbsp;&nbsp;z-index: 1;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 0px;<br>&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;padding: 0;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;border: none;<br>}<br><br>.btn-22:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-right 2s linear infinite;<br>&nbsp;&nbsp;transition: 0.5s ease-in-out;<br>}<br><br>.btn-22:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-bottom 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-22 span {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;padding: 4px;<br>}<br><br>.btn-22 span:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 100%;<br>&nbsp;&nbsp;height: 2px;<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-left 2s linear infinite;<br>}<br><br>.btn-22 span:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;width: 2px;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #bbb);<br>&nbsp;&nbsp;animation: btn-22-top 2s linear infinite;<br>&nbsp;&nbsp;animation-delay: 1s;<br>&nbsp;&nbsp;transform: translateY(-100%);<br>}<br><br>.btn-22:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, red);<br>}<br><br>.btn-22:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, red);<br>}<br><br>.btn-22 span:hover:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, red);<br>}<br><br>.btn-22 span:hover:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, red);<br>}<br><br>.btn-22:hover {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.btn-22:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to right, transparent, #00a7fc);<br>}<br><br>.btn-22:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to bottom, transparent, #00a7fc);<br>}<br><br>.btn-22 span:active:before {<br>&nbsp;&nbsp;background: linear-gradient(to top, transparent, #00a7fc);<br>}<br><br>.btn-22 span:active:after {<br>&nbsp;&nbsp;background: linear-gradient(to left, transparent, #00a7fc);<br>}<br><br>.btn-22:active {<br>&nbsp;&nbsp;color: #00a7fc;<br>}<br><br>@keyframes btn-22-right {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-22-top {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-22-left {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateX(-100%);<br>&nbsp;&nbsp;}<br><br>}<br><br>@keyframes btn-22-bottom {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(-100%);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp; &nbsp;&nbsp;transform: translateY(100%);<br>&nbsp;&nbsp;}<br><br>}';
} else if (modalId == 23) {
messageAnimation("My Favorite!! 😜", "#F1B139", "#333", 3);
copyCSS.innerHTML += '&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background-color: transparent;<br>}<br><br>.btn-23:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: 50%;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;background: red;<br>&nbsp;&nbsp;border-radius: 23px;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-23:hover:before {<br>&nbsp;&nbsp;width: 120%;<br>&nbsp;&nbsp;left: -10%;<br>}<br><br>.btn-23:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-23:active {<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-23:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-23:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}<br><br>.btn-23:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 24) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>&nbsp;&nbsp;overflow: hidden;<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>.btn-24:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 100%;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;width: 120%;<br>&nbsp;&nbsp;left: -10%;<br>&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Change background-color to your preference;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;border-radius: 23px;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-24:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-24:hover:before {<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;left: 50%;<br>}<br><br>.btn-24:active {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;color: #333;<br>}<br><br>.btn-24:active:before {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 25) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-25:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-25:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-25:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-25:hover:before, .btn-25:hover:after {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-25:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-25:active:before, .btn-25:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 26) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-26:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;right: 0;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-26:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;width: 50%;<br>&nbsp;&nbsp;height: 0%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-26:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-26:hover:before, .btn-26:hover:after {<br>&nbsp;&nbsp;height: 100%;<br>}<br><br>.btn-26:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-26:active:before, .btn-26:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 27) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-27:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-27:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-27:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-27:hover:before, .btn-27:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-27:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-27:active:before, .btn-27:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
} else if (modalId == 28) {
copyCSS.innerHTML += '&nbsp;&nbsp;background: transparent;<br>}<br><br>.btn-28:before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;bottom: 0;<br>&nbsp;&nbsp;left: 0;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-28:after {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;top: 0%;<br>&nbsp;&nbsp;right: 0%;<br>&nbsp;&nbsp;width: 0%;<br>&nbsp;&nbsp;height: 50%;<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;transition: all 0.5s ease-in-out;<br>&nbsp;&nbsp;z-index: -1;<br>}<br><br>.btn-28:hover {<br>&nbsp;&nbsp;color: #f1f1f1;<br>&nbsp;&nbsp;border-color: red;<br>}<br><br>.btn-28:hover:before, .btn-28:hover:after {<br>&nbsp;&nbsp;width: 100%;<br>}<br><br>.btn-28:active {<br>&nbsp;&nbsp;color: #333;<br>&nbsp;&nbsp;border-color: #00a7fc;<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}<br><br>.btn-28:active:before, .btn-28:active:after {<br>&nbsp;&nbsp;background-color: #00a7fc;<br>}';
}
copyCSS.innerHTML += "<br><br>.btn-" + modalId + ":focus {<br>&nbsp;&nbsp;outline: none<br>}";
modal.style.display = "block";
setTimeout(function() {modal.style.opacity = "1";}, 1);
document.documentElement.style.overflow = "hidden";
showHTML();
}
function closeModal() {
modal.style.opacity = "0";
setTimeout(function() {modal.style.display = "none";}, 300);
document.documentElement.style.overflow = "auto";
copyCSS.scrollTo(0, 0);
copyHTML.scrollTo(0, 0);
}
function showHTML() {
if (selected == "CSS") {
copyHTML.style.display = "block";
copyCSS.style.display = "none";
selected = "HTML";
htmlButton.style.opacity = "1";
cssButton.style.opacity = "0.5";
}
}
function showCSS() {
if (selected == "HTML") {
copyHTML.style.display = "none";
copyCSS.style.display = "block";
selected = "CSS";
cssButton.style.opacity = "1";
htmlButton.style.opacity = "0.5";
}
}
function copyText(copySelect) {
if (clicked == false) {
var copyTextareaValue;
if (copySelect == "HTML") {
copyTextareaValue = '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Marvel">\n\n<button class="btn-' + modalId + '">\n <span>Click here</span>\n</button>';
showHTML();
} else if (copySelect == "CSS") {
copyTextareaValue = copyCSS.innerHTML;
copyTextareaValue = copyTextareaValue.replace(/<br>/g, "\n");
copyTextareaValue = copyTextareaValue.replace(/&nbsp;/g, " ");
showCSS();
}
messageAnimation(copySelect + " Copied!", "red", "#f1f1f1", 2);
copyTextarea.value = copyTextareaValue;
copyTextarea.style.display = "block";
copyTextarea.select();
copyTextarea.setSelectionRange(0, 99999);
document.execCommand('copy');
copyTextarea.setSelectionRange(0, 0);
copyTextarea.blur();
copyTextarea.style.display = "none";
}
}
function messageAnimation(messageText, backgroundColor, color, duration) {
clicked = true;
copyMessage.innerHTML = messageText;
copyMessage.style.left = "40px";
copyMessage.style.opacity = "1";
copyMessage.style.backgroundColor = backgroundColor;
copyMessage.style.color = color;
setTimeout(function() {copyMessage.style.left = "10px"}, 300);
setTimeout(function() {copyMessage.style.bottom = "100px"; copyMessage.style.opacity = "0"}, duration * 1000);
setTimeout(function() {copyMessage.style.left = "-250px"; copyMessage.style.bottom = "10px"; clicked = false;}, duration * 1000 + 300);
}
function onLoad() {
var width = window.innerWidth;
var height = window.innerHeight;
modalBox.style.width = width - 200 + "px";
modalBox.style.height = height - 100 + "px";
content[0].style.width = width - 220 + "px";
content[0].style.height = height - 210 + "px";
content[1].style.width = width - 220 + "px";
content[1].style.height = height - 210 + "px";
copyButton.style.left = (width - 425) / 2 + "px";
}
function onResize() {
var width = window.innerWidth;
var height = window.innerHeight;
modalBox.style.width = width - 200 + "px";
modalBox.style.height = height - 100 + "px";
content[0].style.width = width - 220 + "px";
content[0].style.height = height - 210 + "px";
content[1].style.width = width - 220 + "px";
content[1].style.height = height - 210 + "px";
copyButton.style.left = (width - 445) / 2 + "px"
}
Raw
animated_button.html
<body onload="onLoad()" onresize="onResize()">
<h1 id="title" align="center">CSS Button Animation</h1>
<h6 id="tip">Tap a button to copy its code</h6>
<div id="button-container" class="button-container">
<button id="btn1" class="btn-1"><span>Click here</span></button>
<button id="btn2" class="btn-2"><span>Click here</span></button>
<button id="btn3" class="btn-3"><span>Click here</span></button>
<button id="btn4" class="btn-4"><span>Click here</span></button>
<button id="btn5" class="btn-5"><span>Click here</span></button>
<button id="btn6" class="btn-6"><span>Click here</span></button>
<button id="btn7" class="btn-7"><span>Click here</span></button>
<button id="btn8" class="btn-8"><span>Click here</span></button>
<button id="btn9" class="btn-9"><span>Click here</span></button>
<button id="btn10" class="btn-10"><span>Click here</span></button>
<button id="btn11" class="btn-11"><span>Click here</span></button>
<button id="btn12" class="btn-12"><span>Click here</span></button>
<button id="btn13" class="btn-13"><span>Click here</span></button>
<button id="btn14" class="btn-14"><span>Click here</span></button>
<button id="btn15" class="btn-15"><span>Click here</span></button>
<button id="btn16" class="btn-16"><span>Click here</span></button>
<button id="btn17" class="btn-17"><span>Click here</span></button>
<button id="btn18" class="btn-18"><span>Click here</span></button>
<button id="btn19" class="btn-19"><span>Click here</span></button>
<button id="btn20" class="btn-20"><span>Click here</span></button>
<button id="btn21" class="btn-21"><span>Click here</span></button>
<button id="btn22" class="btn-22"><span>Click here</span></button>
<button id="btn23" class="btn-23"><span>Click here</span></button>
<button id="btn24" class="btn-24"><span>Click here</span></button>
<button id="btn25" class="btn-25"><span>Click here</span></button>
<button id="btn26" class="btn-26"><span>Click here</span></button>
<button id="btn27" class="btn-27"><span>Click here</span></button>
<button id="btn28" class="btn-28"><span>Click here</span></button>
</div>
<!--
Following code is for copying button code
-->
<div class="modal" id="modal">
<button class="close"><span id="closeModal" class="material-icons" style="font-size: 30pt">close</span></button>
<div id="modal-box" class="modal-box">
<div class="modal-box-buttons" id="modal-box-buttons">
<button id="html-button" class="modal-box-buttons-button" onclick="showHTML()">HTML</button><button style="opacity: 0.5" id="css-button" onclick="showCSS()" class ="modal-box-buttons-button">CSS</button>
</div>
<div id="copy">
<div class="content" id="copy-html"></div>
<div class="content css" id="copy-css"></div>
</div>
<div id="copy-button">
<button id="copy-html" onclick="copyText('HTML')" title="Copy HTML">Copy HTML</button><button id="copy-css" onclick="copyText('CSS')" title='Copy CSS'>Copy CSS</button>
</div>
</div>
<textarea id="copy-textarea" style="width: 100%; height: 100%; resize: none; z-index: 1; display: none"></textarea>
</div>
<div id="copy-message"></div>
<div id="footer"><h4>Made by <a title="Yohaan Chokhany" href="https://www.codepen.io/yohaanchokhany/" target="_blank">Yohaan Chokhany</a></h4></div>
</body>
Raw
autoflip.scss
body{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
background: #1e1e24;
align-items: center;
justify-content: center;
}
$speed: 0.5s;
.btn-flip{
opacity: 1;
outline: 0;
color: #fff;
line-height: 40px;
position: relative;
text-align: center;
letter-spacing: 1px;
display: inline-block;
text-decoration: none;
font-family: 'Open Sans';
text-transform: uppercase;
&:hover{
&:after{
opacity: 1;
transform: translateY(0) rotateX(0);
}
&:before{
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}
}
&:after{
top: 0;
left: 0;
opacity: 0;
width: 100%;
color: #323237;
display: block;
transition: $speed;
position: absolute;
background: #adadaf;
content: attr(data-back);
transform: translateY(-50%) rotateX(90deg);
}
&:before{
top: 0;
left: 0;
opacity: 1;
color: #adadaf;
display: block;
padding: 0 30px;
line-height: 40px;
transition: $speed;
position: relative;
background: #323237;
content: attr(data-front);
transform: translateY(0) rotateX(0);
}
}
Raw
autoflip_button.html
<a href="#" class="btn-flip" data-back="Back" data-front="Front"></a>
Raw
bubble_effect.js
$('.button--bubble').each(function() {
var $circlesTopLeft = $(this).parent().find('.circle.top-left');
var $circlesBottomRight = $(this).parent().find('.circle.bottom-right');
var tl = new TimelineLite();
var tl2 = new TimelineLite();
var btTl = new TimelineLite({ paused: true });
tl.to($circlesTopLeft, 1.2, { x: -25, y: -25, scaleY: 2, ease: SlowMo.ease.config(0.1, 0.7, false) });
tl.to($circlesTopLeft.eq(0), 0.1, { scale: 0.2, x: '+=6', y: '-=2' });
tl.to($circlesTopLeft.eq(1), 0.1, { scaleX: 1, scaleY: 0.8, x: '-=10', y: '-=7' }, '-=0.1');
tl.to($circlesTopLeft.eq(2), 0.1, { scale: 0.2, x: '-=15', y: '+=6' }, '-=0.1');
tl.to($circlesTopLeft.eq(0), 1, { scale: 0, x: '-=5', y: '-=15', opacity: 0 });
tl.to($circlesTopLeft.eq(1), 1, { scaleX: 0.4, scaleY: 0.4, x: '-=10', y: '-=10', opacity: 0 }, '-=1');
tl.to($circlesTopLeft.eq(2), 1, { scale: 0, x: '-=15', y: '+=5', opacity: 0 }, '-=1');
var tlBt1 = new TimelineLite();
var tlBt2 = new TimelineLite();
tlBt1.set($circlesTopLeft, { x: 0, y: 0, rotation: -45 });
tlBt1.add(tl);
tl2.set($circlesBottomRight, { x: 0, y: 0 });
tl2.to($circlesBottomRight, 1.1, { x: 30, y: 30, ease: SlowMo.ease.config(0.1, 0.7, false) });
tl2.to($circlesBottomRight.eq(0), 0.1, { scale: 0.2, x: '-=6', y: '+=3' });
tl2.to($circlesBottomRight.eq(1), 0.1, { scale: 0.8, x: '+=7', y: '+=3' }, '-=0.1');
tl2.to($circlesBottomRight.eq(2), 0.1, { scale: 0.2, x: '+=15', y: '-=6' }, '-=0.2');
tl2.to($circlesBottomRight.eq(0), 1, { scale: 0, x: '+=5', y: '+=15', opacity: 0 });
tl2.to($circlesBottomRight.eq(1), 1, { scale: 0.4, x: '+=7', y: '+=7', opacity: 0 }, '-=1');
tl2.to($circlesBottomRight.eq(2), 1, { scale: 0, x: '+=15', y: '-=5', opacity: 0 }, '-=1');
tlBt2.set($circlesBottomRight, { x: 0, y: 0, rotation: 45 });
tlBt2.add(tl2);
btTl.add(tlBt1);
btTl.to($(this).parent().find('.button.effect-button'), 0.8, { scaleY: 1.1 }, 0.1);
btTl.add(tlBt2, 0.2);
btTl.to($(this).parent().find('.button.effect-button'), 1.8, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4) }, 1.2);
btTl.timeScale(2.6);
$(this).on('mouseover', function() {
btTl.restart();
});
});
Raw
bubble_effect.scss
$dark-blue: #222;
$green: #90feb5;
$action-color: $green;
* {
box-sizing: border-box;
}
div{
display: block;
height: 100%;
animation: hue-rotate 10s linear infinite;
}
.button {
-webkit-font-smoothing: antialiased;
background-color: $dark-blue;
border: none;
color: #fff;
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 100;
text-decoration: none;
user-select: none;
letter-spacing: 1px;
color: white;
padding: 20px 40px;
text-transform: uppercase;
transition: all 0.1s ease-out;
&:hover {
background-color: $action-color;
color: #fff;
}
&:active {
transform: scale(0.95);
}
&--bubble {
position: relative;
z-index: 2;
color: white;
background: none;
&:hover {
background: none;
}
&:hover + .button--bubble__effect-container .circle {
background: darken($action-color, 15%);
}
&:hover + .button--bubble__effect-container .button {
background: darken($action-color, 15%);
}
&:active + .button--bubble__effect-container {
transform: scale(0.95);
}
&__container {
position: relative;
display: inline-block;
.effect-button {
position: absolute;
width: 50%;
height: 25%;
top: 50%;
left: 25%;
z-index: 1;
transform: translateY(-50%);
background: $dark-blue;
transition: background 0.1s ease-out;
}
}
}
}
.button--bubble__effect-container {
position: absolute;
display: block;
width: 200%;
height: 400%;
top: -150%;
left: -50%;
-webkit-filter: url("#goo");
filter: url("#goo");
transition: all 0.1s ease-out;
pointer-events: none;
.circle {
position: absolute;
width: 25px;
height: 25px;
border-radius: 15px;
background: $dark-blue;
transition: background 0.1s ease-out;
&.top-left {
top: 40%;
left: 27%;
}
&.bottom-right {
bottom: 40%;
right: 27%;
}
}
}
.goo {
position: absolute;
visibility: hidden;
width: 1px;
height: 1px;
}
html, body {
width: 100%;
height: 100%;
text-align: center;
}
.button--bubble__container {
top: 50%;
margin-top: -25px;
}
@keyframes hue-rotate {
from {
-webkit-filter: hue-rotate(0);
-moz-filter: hue-rotate(0);
-ms-filter: hue-rotate(0);
filter: hue-rotate(0);
}
to {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-ms-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
Raw
bubble_effect_button.html
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="goo">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo"/>
</filter>
</defs>
</svg>
<span class="button--bubble__container">
<a href="#campaign" class="button button--bubble">
Hover me
</a>
<span class="button--bubble__effect-container">
<span class="circle top-left"></span>
<span class="circle top-left"></span>
<span class="circle top-left"></span>
<span class="button effect-button"></span>
<span class="circle bottom-right"></span>
<span class="circle bottom-right"></span>
<span class="circle bottom-right"></span>
</span>
</span>
</div>
Raw
bubbly.js
const animateButton = e => {
e.preventDefault;
//reset animation
e.target.classList.remove('animate');
e.target.classList.add('animate');
setTimeout(() => {
e.target.classList.remove('animate');
}, 700);
};
const bubblyButtons = document.getElementsByClassName("bubbly-button");
for (let i = 0; i < bubblyButtons.length; i++) {
bubblyButtons[i].addEventListener('click', animateButton, false);
}
Raw
bubbly.scss
$fuschia: #ff0081;
$button-bg: $fuschia;
$button-text-color: #fff;
$baby-blue: #f8faff;
body{
font-size: 16px;
font-family: 'Helvetica', 'Arial', sans-serif;
text-align: center;
background-color: $baby-blue;
}
.bubbly-button{
font-family: 'Helvetica', 'Arial', sans-serif;
display: inline-block;
font-size: 1em;
padding: 1em 2em;
margin-top: 100px;
margin-bottom: 60px;
-webkit-appearance: none;
appearance: none;
background-color: $button-bg;
color: $button-text-color;
border-radius: 4px;
border: none;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
&:focus {
outline: 0;
}
&:before, &:after{
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
&:before{
display: none;
top: -75%;
background-image:
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, transparent 20%, $button-bg 20%, transparent 30%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, transparent 10%, $button-bg 15%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
//background-position: 0% 80%, -5% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 85% 30%;
}
&:after{
display: none;
bottom: -75%;
background-image:
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, transparent 10%, $button-bg 15%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
//background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
&:active{
transform: scale(0.9);
background-color: darken($button-bg, 5%);
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
&.animate{
&:before{
display: block;
animation: topBubbles ease-in-out 0.75s forwards;
}
&:after{
display: block;
animation: bottomBubbles ease-in-out 0.75s forwards;
}
}
}
@keyframes topBubbles {
0%{
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@keyframes bottomBubbles {
0%{
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
Raw
bubbly_button.html
<button class="bubbly-button">Click me!</button>
Raw
download.js
document.querySelectorAll('.button').forEach(button => {
let duration = 3000,
svg = button.querySelector('svg'),
svgPath = new Proxy({
y: null,
smoothing: null
}, {
set(target, key, value) {
target[key] = value;
if(target.y !== null && target.smoothing !== null) {
svg.innerHTML = getPath(target.y, target.smoothing, null);
}
return true;
},
get(target, key) {
return target[key];
}
});
button.style.setProperty('--duration', duration);
svgPath.y = 20;
svgPath.smoothing = 0;
button.addEventListener('click', e => {
e.preventDefault();
if(!button.classList.contains('loading')) {
button.classList.add('loading');
gsap.to(svgPath, {
smoothing: .3,
duration: duration * .065 / 1000
});
gsap.to(svgPath, {
y: 12,
duration: duration * .265 / 1000,
delay: duration * .065 / 1000,
ease: Elastic.easeOut.config(1.12, .4)
});
setTimeout(() => {
svg.innerHTML = getPath(0, 0, [
[3, 14],
[8, 19],
[21, 6]
]);
}, duration / 2);
}
});
});
function getPoint(point, i, a, smoothing) {
let cp = (current, previous, next, reverse) => {
let p = previous || current,
n = next || current,
o = {
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
},
angle = o.angle + (reverse ? Math.PI : 0),
length = o.length * smoothing;
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
},
cps = cp(a[i - 1], a[i - 2], point, false),
cpe = cp(point, a[i - 1], a[i + 1], true);
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}
function getPath(update, smoothing, pointsNew) {
let points = pointsNew ? pointsNew : [
[4, 12],
[12, update],
[20, 12]
],
d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
return `<path d="${d}" />`;
}
Raw
download.scss
.button {
&.dark-single {
--background: none;
--rectangle: #242836;
--success: #4BC793;
}
&.white-single {
--background: none;
--rectangle: #F5F9FF;
--arrow: #275efe;
--success: #275efe;
--shadow: rgba(10, 22, 50, .1);
}
&.dark {
--background: #242836;
--rectangle: #1C212E;
--arrow: #F5F9FF;
--text: #F5F9FF;
--success: #2F3545;
}
}
.button {
--background: #275efe;
--rectangle: #184fee;
--success: #{mix(white, #184fee, 20%)};
--text: #fff;
--arrow: #fff;
--checkmark: #fff;
--shadow: rgba(10, 22, 50, .24);
display: flex;
overflow: hidden;
text-decoration: none;
-webkit-mask-image: -webkit-radial-gradient(white, black);
background: var(--background);
border-radius: 8px;
box-shadow: 0 2px 8px -1px var(--shadow);
transition: transform .2s ease, box-shadow .2s ease;
&:active {
transform: scale(.95);
box-shadow: 0 1px 4px -1px var(--shadow);
}
ul {
margin: 0;
padding: 16px 40px;
list-style: none;
text-align: center;
position: relative;
backface-visibility: hidden;
font-size: 16px;
font-weight: 500;
line-height: 28px;
color: var(--text);
li {
&:not(:first-child) {
top: 16px;
left: 0;
right: 0;
position: absolute;
}
&:nth-child(2) {
top: 76px;
}
&:nth-child(3) {
top: 136px;
}
}
}
& > div {
position: relative;
width: 60px;
height: 60px;
background: var(--rectangle);
&:before,
&:after {
content: '';
display: block;
position: absolute;
}
&:before {
border-radius: 1px;
width: 2px;
top: 50%;
left: 50%;
height: 17px;
margin: -9px 0 0 -1px;
background: var(--arrow);
}
&:after {
width: 60px;
height: 60px;
transform-origin: 50% 0;
border-radius: 0 0 80% 80%;
background: var(--success);
top: 0;
left: 0;
transform: scaleY(0);
}
svg {
display: block;
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin: -9px 0 0 -10px;
fill: none;
z-index: 1;
stroke-width: 2px;
stroke: var(--arrow);
stroke-linecap: round;
stroke-linejoin: round;
}
}
&.loading {
ul {
animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
& > div {
&:before {
animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
&:after {
animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
svg {
animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
}
}
}
}
@keyframes text {
10%,
85% {
transform: translateY(-100%);
}
95%,
100% {
transform: translateY(-200%);
}
}
@keyframes line {
5%,
10% {
transform: translateY(-30px);
}
40% {
transform: translateY(-20px);
}
65% {
transform: translateY(0);
}
75%,
100% {
transform: translateY(30px);
}
}
@keyframes svg {
0%,
20% {
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
21%,
89% {
stroke-dasharray: 26px;
stroke-dashoffset: 26px;
stroke-width: 3px;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
100% {
stroke-dasharray: 26px;
stroke-dashoffset: 0;
margin: -10px 0 0 -10px;
stroke: var(--checkmark);
}
12% {
opacity: 1;
}
20%,
89% {
opacity: 0;
}
90%,
100% {
opacity: 1;
}
}
@keyframes background {
10% {
transform: scaleY(0);
}
40% {
transform: scaleY(.15);
}
65% {
transform: scaleY(.5);
border-radius: 0 0 50% 50%;
}
75% {
border-radius: 0 0 50% 50%;
}
90%,
100% {
border-radius: 0;
}
75%,
100% {
transform: scaleY(1);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
font-family: 'Roboto', Arial;
justify-content: center;
align-items: center;
background: #E4ECFA;
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
& > div {
flex-basis: 100%;
width: 0;
}
.button {
margin: 16px;
@media(max-width: 400px) {
margin: 12px;
}
}
}
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
}
Raw
download_button.html
<div class="container">
<a href="" class="button">
<ul>
<li>&#68;ownload</li>
<li>&#68;ownloading</li>
<li>Open File</li>
</ul>
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
<a href="" class="button dark-single">
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
<div></div>
<a href="" class="button white-single">
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
<a href="" class="button dark">
<ul>
<li>&#68;ownload</li>
<li>&#68;ownloading</li>
<li>Open File</li>
</ul>
<div>
<svg viewBox="0 0 24 24"></svg>
</div>
</a>
</div>
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/7299868-Download-Buttons" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
Raw
fizzy.scss
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,700,500,400italic,500italic,700italic,300italic);
body{
background: #2C3940;
overflow:hidden;
font-family: 'Fira Sans', sans-serif;
a{
color:white;
padding-top:20px;
font-size:10px;
opacity:0.6;
position:relative;
top:10px;
transition:all .3s;
font-weight:100;
text-decoration:none;
&:hover{
opacity:1;
}
i.l{
margin-right:3px;
}
}
}
input{
display:none;
}
input:checked + label{
.button_inner{
background:transparent;
transform:rotate(90deg);
width:100px;
border-radius:100px;
box-shadow:0px 0px 0px 440px rgba(0,0,0,0);
animation: finalbox .4s 4.42s cubic-bezier(0.39, 2.01, 0.27, 0.75) forwards;
span.t{
opacity:0;
top:20px;
}
}
i.l{
left:14px;
opacity:1;
top:11px;
animation:down 1s .25s infinite,final .2s 4s forwards;
}
.tick{
position: absolute;
left: 2px;
right: 0;
transform:scale(0) rotate(-90deg);
color: #00C1FC;
top: 11px;
margin: auto;
font-size: 22px;
animation: tick .3s 4.7s forwards;
}
.button_spots{
opacity:1;
@for $i from 0 through 60{
&:nth-of-type(#{$i}){
top:(16px - random(10)) - 0 !important;
left:-34px !important;
opacity:0;
padding:random(20)/4 + 2 + px !important;
animation:spew 1s .3s forwards,rotate 4s + random(4)/10 .25s + random(12)/10 linear infinite ,final .2s 4s forwards,spot-#{$i} .7s .4/random(10) + random(10)/10 + 10s linear infinite !important;
}
}
}
}
.tick{
position:absolute;
left:-40;
right:0;
transform:scale(0);
margin:auto;
font-size:22px;
}
.button{
position:absolute;
top:50%;
left:0;
right:0;
margin:auto;
text-align:Center;
height:360px;
width:200px;
transform:translateY(-50%);
h1{
font-weight:100;
color:White;
font-size:24px;
margin:0;
text-transform:uppercase;
}
h2{
font-weight:100;
color:#00C4FF;
opacity:1;
font-size:14px;
margin:4px 0px 0px 0px;
}
.b_l_quad .button_spots{
@for $i from 1 through 20{
&:nth-child(#{$i}){
padding:random(3) + 2 + px;
left: -25 + ($i * 12) + px;
top: 50 + px;
}
}
@for $i from 20 through 40{
&:nth-child(#{$i}){
padding:random(3) + 2 + px;
left: -255 + ($i * 12) + px;
top: -12 + px;
}
}
@for $i from 40 through 46{
&:nth-child(#{$i}){
padding:random(3) + 2 + px;
left: 204px;
top: -488 + ($i * 12) + px;
}
}
@for $i from 46 through 52{
&:nth-child(#{$i}){
padding:random(3) + 2 + px;
left: -10px;
top: -568 + ($i * 12) + px;
}
}
}
.button_spots{
position:absolute;
border-radius:100px;
background:green;
opacity:0;
animation:opacity 1s;
@for $i from 1 through 52{
&:nth-of-type(#{$i}){
transform-origin:90px - random(10) 20px - random(10);
background:hsla(350 + random(399) ,57% - random(10) ,65%,1);
box-shadow:0px 0px 10px rgba(255,255,255,0.12);
transition:all 1s + random(10)/10;
}
}
}
&_inner{
//overflow:hidden;
border-radius:2px;
position:absolute;
width:200px;
height:50px;
left:0;
right:0;
top:50%;
margin:auto;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
font-weight: 100;
font-size: 12px;
cursor:pointer;
border: 2px solid #FFFFFF;
color: white;
text-align: Center;
transition:all .3s,box-shadow .2s,transform .2s .2s;
span.t{
position:relative;
top:6px;
opacity:1;
left:-10px;
transition:left .4s .1s;
}
i.l{
position: relative;
left: -19px;
top: 20px;
color: #00C4FF;
font-size: 25px;
opacity: 0;
transition: left .3s 0s,top .3s 0s,opacity .3s 0s;
}
&:hover{
color:#2C3940;
background: white;
box-shadow: 0px 17px 18px -14px rgba(0, 0, 0, 0.08);
span.t{
left:16px;
transition:left .4s;
}
i.l{
top:12px;
opacity:1;
transition: left .3s 0s,top .3s .1s,opacity .3s .1s;
}
}
&:hover .button_spots{
@for $i from 1 through 19{
&:nth-of-type(#{$i}){
animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
}
}
@for $i from 20 through 40{
&:nth-of-type(#{$i}){
animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
}
}
@for $i from 40 through 46{
&:nth-of-type(#{$i}){
animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
}
}
@for $i from 46 through 54{
&:nth-of-type(#{$i}){
animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
}
}
}
}
}
@for $i from 1 through 20{
@keyframes spot-#{$i}{
from{opacity:0;}
to{transform:translateY(30px) translatex(-20px + $i*2);opacity:.6;}
}
}
@for $i from 20 through 40{
@keyframes spot-#{$i}{
from{opacity:0;}
to{transform:translateY(-30px) translatex(-50px + $i*2);opacity:.6;}
}
}
@for $i from 40 through 45{
@keyframes spot-#{$i}{
from{opacity:0;}
to{transform:translateY(-86px + $i*2) translatex(40px);opacity:.6;}
}
}
@for $i from 46 through 54{
@keyframes spot-#{$i}{
from{opacity:0;}
to{transform:translateY(-99px + $i*2) translatex(-40px);opacity:.6;}
}
}
@keyframes opacity{
from{}
to{opacity:0;}
}
@keyframes rotate{
from{opacity:.8}
to{transform:rotate(360deg);opacity:.8}
}
@keyframes down{
from{left:10px;}
to{left:57px;}
}
@keyframes spew{
from{opacity:0;}
to{opacity:0.8;}
}
@keyframes final{
from{opacity:1;}
to{opacity:0;}
}
@keyframes finalbox{
from{}
to{width:50px;}
}
@keyframes tick{
from{}
to{transform:scale(1) rotate(-90deg)}
}
Raw
fizzy_button.html
<div class='button'>
<h1>Fizzy CSS Button</h1>
<h2>With super fizzy particle action</h2>
<a href='https://www.codepen.io/jcoulterdesign'>
<i class='ion-social-codepen'></i>
<span>More Codepen shenanigans</span>
</a>
<input id='button' type='checkbox'>
<label for='button'>
<div class='button_inner q'>
<i class='l ion-log-in'></i>
<span class='t'>Downloads</span>
<span>
<i class='tick ion-checkmark-round'></i>
</span>
<div class='b_l_quad'>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
<div class='button_spots'></div>
</div>
</div>
</label>
</div>
Raw
flip.js
function flipCover (css, options) {
var options = options || {}
if (typeof css === "object") {
options = css
} else {
options.css = css
}
var css = options.css
var url = options.url
var text = options.text || css
var width = options.width
var height = options.height
var $section = $(".flip-cover-" + css).addClass(css + "-section")
var $button = $("<div>").addClass(css + "-button")
var $cover = $("<div>").addClass(css + "-cover")
var $outer = $("<div>").addClass(css + "-outer")
var $inner = $("<div>").addClass(css + "-inner")
if (width) {
$section.css("width", width)
}
if (height) {
$section.css("height", height)
var lineHeight = ':after{ line-height: ' + height + ';}'
var $outerStyle = $('<style>').text('.' + css + '-outer' + lineHeight)
$outerStyle.appendTo($outer)
var $innerStyle = $('<style>').text('.' + css + '-inner' + lineHeight)
$innerStyle.appendTo($inner)
}
$cover.html($outer)
$inner.insertAfter($outer)
$button.html($("<a>").text(text).attr("href", url))
$section.html($button)
$cover.insertAfter($button)
}
flipCover({
css: "dribbble",
url: "https://dribbble.com/vveleva",
text: "vveleva",
width: "80px"
})
flipCover("twiter", {
url: "https://twitter.com/vveleva",
text: "vveleva",
width: "80px"
})
flipCover("linkedin", {
url: "https://linkedin.com/in/vveleva",
text: "vveleva",
width: "80px"
})
flipCover("email", {
text: "vvveleva @gmail",
width: "80px",
height: "50px"
})
Raw
flip.scss
html, body { height: 100%; }
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: -webkit-radial-gradient(
center top, circle farthest-corner,
#FFF 0%, #D8DFE9 100%);
background-image: radial-gradient(
circle farthest-corner at center top,
#FFF 0%, #D8DFE9 100%);
overflow: hidden;
}
@font-face {
font-family: icon;
src: url('https://bennettfeely.com/fonts/icons.woff');
}
@include flip-cover("dribbble", "d", #FC1786);
@include flip-cover("twiter", "t", #2EC8FA);
@include flip-cover("linkedin", "in", #2672ae);
@include flip-cover("email", "g", #f80);
Raw
flip_button.html
<div class="flip-cover-dribbble"></div>
<div class="flip-cover-twiter"></div>
<div class="flip-cover-linkedin"></div>
<div class="flip-cover-email"></div>
Raw
hover.scss
$icon-size : 60px;
$border-radius: 0.5;//15% = 0.15, 50% = 0.50 etc.
$background : #2d2c3e;
$background-b : #2d2c3e;
// Icon Colors
$green : #16A085;
$red : #C82647;
$green-l : #8CC63F;
$orange : #EB9532;
$purple : #7E3661;
// Text
$white : #FFFFFF;
body{
background: $background-b;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
z-index: -1;
}
.container{
display: table;
height: 95vh;
width: 90%;
padding-bottom: 5vh;
margin: auto auto;
@media (max-width: 900px){
}
background: $background;
z-index: -1;
}
.content{
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1{
font-family: 'Lato', sans-serif;
font-size: 36px;
font-weight: 300;
color: $white;
}
.icon-container{
margin-top: 30px;
width: 100%;
height: $icon-size;
}
.icon{
cursor: pointer;
position: relative;
display: inline-block;
width: $icon-size;
height: $icon-size;
margin-left: $icon-size/5;
margin-right: $icon-size/5;
border-radius: $icon-size*$border-radius;
overflow: hidden;
&::before, &::after{
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.25s ease;
border-radius: $icon-size*$border-radius;
}
i{
position: relative;
color: $white;
font-size: $icon-size/2;
margin-top: $icon-size/4;
transition: all 0.25s ease;
}
}
.icon-fill{
&::before{
transition-duration: 0.5s;
box-shadow: inset 0 0 0 1px $green;
}
&:hover::before{
box-shadow: inset 0 0 0 $icon-size $green;
}
}
.icon-enter{
&::after{
box-shadow: inset 0 0 0 1px $orange;
}
&::before{
border-radius: 0;
margin-left: -100%;
box-shadow: inset 0 0 0 $icon-size $orange;
}
&:hover::before{
margin-left: 0;
}
}
.icon-expand{
&::after{
box-shadow: inset 0 0 0 1px $red;
}
&::before{
background: $red;
box-shadow: inset 0 0 0 $icon-size $background;
}
&:hover::before{
box-shadow: inset 0 0 0 1px $background;
}
}
.icon-collapse{
&::before{
border-radius: 0;
}
&:hover::before{
box-shadow:
inset 0 $icon-size/2 0 0 $green-l,
inset 0 $icon-size/-2 0 0 $green-l;
}
&::after{
box-shadow: inset 0 0 0 1px $green-l;
}
}
.icon-rotate{
box-shadow: inset 0 0 0 1px $purple;
&::after, &::before{
border: 0px solid transparent;
}
&:hover::before{
transition:
border-top-width 0.3s ease,
border-top-color 0.3s ease;
border-width: $icon-size;
border-top-color: $purple;
}
&:hover::after{
transition:
border-left-width 0.3s ease,
border-left-color 0.3s ease;
border-width: $icon-size;
border-left-color: $purple;
}
&:hover{
transition: background 0.001s ease 0.3s;
background: $purple;
}
i{
z-index: 1;
}
}
Raw
hover_button.html
<div class="container">
<div class="content">
<h1>CSS3 Icons</h1>
<div class="icon-container">
<div class="icon icon-fill"><i class="fa fa-home"></i></div>
<div class="icon icon-enter"><i class="fa fa-user"></i></div>
<div class="icon icon-expand"> <i class="fa fa-bars"></i></div>
<div class="icon icon-collapse"><i class="fa fa-sign-in"></i></div>
<div class="icon icon-rotate"><i class="fa fa-phone"></i></div>
</div>
</div>
</div>
Raw
hover_effects.js
$(function() {
$('.btn-6')
.on('mouseenter', function(e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('span').css({top:relY, left:relX})
})
.on('mouseout', function(e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('span').css({top:relY, left:relX})
});
});
Raw
hover_effects.scss
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
$btn-width: 250px !default;
$btn-height: 80px !default;
$btn-full: $btn-height+$btn-width !default;
$btn-half: $btn-full/2 !default;
$bg-color: #eeeeee !default;
html {
padding-top: 50px;
font-family: 'Open Sans', Helvetica, arial, sans-serif;
text-align: center;
background-color: $bg-color;
*,
*:before,
*:after {
box-sizing: border-box;
transition: 0.5s ease-in-out;
}
i,em,
b,strong,
span {
transition: none;
}
}
*:before,
*:after {
z-index: -1;
}
h1,
h4 {
font-family: 'Raleway', 'Open Sans', sans-serif;
margin: 0;
line-height: 1;
}
a {
text-decoration: none;
line-height: $btn-height;
color: black;
}
.centerer {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0 1rem
}
@media (min-width: 600px) {
.wrap {
width: 50%;
float: left;
}
}
[class^="btn-"] {
position: relative;
display: block;
overflow: hidden;
@include size(100%, $btn-height);
max-width: $btn-width;
margin: 1rem auto;
text-transform: uppercase;
border: 1px solid currentColor;
}
.btn-0 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before {
content: '';
@include absolute(0,0,0,0);
background-color: $btn-color-dark;
transform: translateX(-100%);
}
&:hover {
color: tint($btn-color, 75%);
&:before {
transform: translateX(0);
}
}
}
.btn-1 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before {
content: '';
@include absolute(0,-50px,0,0);
border-right: 50px solid transparent;
border-bottom: $btn-height solid $btn-color-dark;
transform: translateX(-100%);
}
&:hover {
color: tint($btn-color, 75%);
&:before {
transform: translateX(0);
}
}
}
.btn-1-2 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after {
content: '';
@include absolute(0,0,0,0);
border-bottom: $btn-height solid $btn-color-dark;
}
&:before {
right: -50px;
border-right: 50px solid transparent;
transform: translateX(-100%);
}
&:after {
left: -50px;
border-left: 50px solid transparent;
transform: translateX(100%);
}
&:hover {
color: tint($btn-color, 75%);
&:before { transform: translateX(-40%); }
&:after { transform: translateX(40%); }
}
}
.btn-2 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after {
content: '';
@include absolute(0,0,0,0);
}
&:before {
right: -50px;
border-right: 50px solid transparent;
border-bottom: $btn-height solid $btn-color-dark;
transform: translateX(-100%);
}
&:after {
left: -50px;
border-left: 50px solid transparent;
border-top: $btn-height solid $btn-color-dark;
transform: translateX(100%);
}
&:hover {
color: tint($btn-color, 75%);
&:before { transform: translateX(-49%); }
&:after { transform: translateX(49%); }
}
}
.btn-3 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
&:before,
&:after {
content: '';
@include absolute(0,0,0,0);
border-top: $btn-height/2 solid $btn-color-dark;
border-bottom: $btn-height/2 solid $btn-color-dark;
}
&:before {
border-right: $btn-height/2 solid transparent;
transform: translateX(-100%);
}
&:after {
border-left: $btn-height/2 solid transparent;
transform: translateX(100%);
}
&:hover {
color: tint($btn-color, 75%);
&:before { transform: translateX(-30%); }
&:after { transform: translateX(30%); }
}
}
.btn-4 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after,
span:before,
span:after {
content: '';
@include absolute(0,0,0,0);
background-color: $btn-color-dark;
}
&:before { transform: translate(-100%, -100%); }
&:after { transform: translate(-100%, 100%); }
span:before { transform: translate(100%, -100%); }
span:after { transform: translate(100%, 100%); }
&:hover {
color: tint($btn-color, 75%);
&:before { transform: translate(-50%, -50%); }
&:after { transform: translate(-50%, 50%); }
span:before { transform: translate(50%, -50%); }
span:after { transform: translate(50%, 50%); }
}
}
.btn-5 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
@include triangle(up-right, 0, $btn-color-dark, true);
@include triangle(down-left, 0, $btn-color-dark, true, before);
&:before,
&:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 0 solid;
transform: rotate(360deg);
}
&:before {
bottom: 0;
left: 0;
border-color: transparent transparent transparent $btn-color-dark;
}
&:after {
top: 0;
right: 0;
border-color: transparent $btn-color-dark transparent transparent;
}
&:hover {
color: tint($btn-color, 75%);
&:before,
&:after {
border-width: $btn-height $btn-width*1.05;
}
}
}
.btn-6 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
span {
@include absolute();
display: block;
@include size(0);
border-radius: 50%;
background-color: $btn-color-dark;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
transform: translate(-50%, -50%);
z-index: -1;
}
&:hover {
color: tint($btn-color, 75%);
span {
@include size(225%, $btn-width*2.25);
}
}
&:active {
background-color: $btn-color;
}
}
.btn-7 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after,
span:before,
span:after {
content: '';
@include absolute(0);
@include size(25.25%, 0);
background-color: $btn-color-dark;
}
&:before { left: 0; }
&:after { left: 50%; }
span {
&:before,
&:after {
top: auto;
bottom: 0;
}
&:before { left: 25%; }
&:after { left: 75%; }
}
&:hover {
color: tint($btn-color, 75%);
&:before,
&:after,
span:before,
span:after {
height: $btn-height;
}
}
}
.btn-8 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after {
content: '';
@include absolute(0,0,0,0);
background-color: $btn-color-dark;
}
&:before { transform: translateY(-100%); }
&:after { transform: translateY(100%); }
&:hover {
color: tint($btn-color, 75%);
&:before { transform: translateY(-50%); }
&:after { transform: translateY(50%); }
}
}
.btn-9 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after,
span:before,
span:after {
content: '';
@include absolute(0,null,null,0);
@include size(100%, 0);
background-color: rgba($btn-color-dark, 0.25);
transition: 0.4s ease-in-out;
}
&:after,
span:before {
top: auto;
bottom: 0;
}
span:before,
span:after {
transition-delay: 0.4s;
}
&:hover {
color: tint($btn-color, 75%);
&:before,
&:after,
span:before,
span:after {
height: $btn-height;
}
}
&:active {
background-color: $btn-color;
}
}
.btn-10 {
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after,
span:before,
span:after {
content: '';
@include absolute(0,null,null,0);
@include size(0, $btn-height);
background-color: rgba($btn-color-dark, 0.25);
transition: 0.4s;
}
&:after,
span:before {
left: auto;
right: 0;
}
span:before,
span:after {
transition-delay: 0.4s;
}
&:hover {
color: tint($btn-color, 75%);
&:before,
&:after,
span:before,
span:after {
width: $btn-width;
}
}
&:active {
background-color: $btn-color;
}
}
@keyframes criss-cross-left {
0% {
left: -20px;
}
50% {
left: 50%;
@include size(20px);
}
100% {
left: 50%;
@include size($btn-width*1.5);
}
}
@keyframes criss-cross-right {
0% {
right: -20px;
}
50% {
right: 50%;
@include size(20px);
}
100% {
right: 50%;
@include size($btn-width*1.5);
}
}
.btn-11 {
position: relative;
$btn-color: random-color($max:200);
$btn-color-dark: shade($btn-color, 40%);
color: tint($btn-color);
&:before,
&:after {
@include absolute(50%);
content: '';
@include size(20px);
background-color: $btn-color;
border-radius: 50%;
}
&:before {
left: -20px;
transform: translate(-50%, -50%);
// animation: criss-cross-left 0.8s reverse;
}
&:after {
right: -20px;
transform: translate(50%, -50%);
// animation: criss-cross-right 0.8s reverse;
}
&:hover {
color: tint($btn-color, 75%);
&:before,
&:after {
// @include size($btn-width);
}
&:before {
animation: criss-cross-left 0.8s both;
animation-direction: alternate;
}
&:after {
animation: criss-cross-right 0.8s both;
animation-direction: alternate;
}
}
}
Raw
hover_effects_buttons.html
<div class="centerer">
<h1>Just Some More</h1>
<h1>Button Hover Effects</h1>
<h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
<div class="wrap">
<a class="btn-0" href="#">Swipe</a>
<a class="btn-1" href="#">Diagonal Swipe</a>
<a class="btn-1-2" href="#">Double Swipe</a>
<a class="btn-2" href="#">Diagonal Close</a>
<a class="btn-3" href="#"><span>Zoning In</span></a>
<a class="btn-4" href="#"><span>4 Corners</span></a>
<a class="btn-5" href="#">Slice</a>
</div>
<div class="wrap">
<a class="btn-6" href="#">Position Aware<span></span></a>
<a class="btn-7" href="#"><span>Alternate</span></a>
<a class="btn-8" href="#">Smoosh</a>
<a class="btn-9" href="#"><span>Vertical Overlap</span></a>
<a class="btn-10" href="#"><span>Horizontal Overlap</span></a>
<a class="btn-11" href="#">Collision</a>
</div>
</div>
Raw
ink.scss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.button-container {
position: relative;
width: 300px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 40vh;
overflow: hidden;
transition: 0.5s;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.button-container button {
width: 101%;
height: 100%;
font-family: "Monument Extended", sans-serif;
font-size: 40px;
background: #fff;
-webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
border: none;
color: #000;
cursor: pointer;
animation: anim2 0.7s steps(22) forwards;
}
.button-container button:hover {
animation: anim1 0.7s steps(22) forwards;
}
.mask {
position: absolute;
color: #fff;
text-align: center;
width: 101%;
font-family: "Monument Extended", sans-serif;
font-weight: lighter;
font-size: 40px;
margin-top: 25px;
overflow: hidden;
}
@keyframes anim1 {
from {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
to {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
}
@keyframes anim2 {
from {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
Raw
ink_button.html
<div class="container">
<div class="button-container">
<span class="mask">HOVER</span>
<button type="button" name="Hover">HOVER</button>
</div>
</div>
Raw
lightswitch.scss
@import "compass/css3";
*, *:after, *:before {
box-sizing: border-box;
}
#switch {
visibility:hidden;
clip:rect(0 0 0 0);
position: absolute;
left: 9999px;
}
.switch {
display: block;
width: 130px;
height: 60px;
margin: 70px auto;
position: relative;
background: #ced8da; /* Old browsers */
background: -moz-linear-gradient(left, #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* IE10+ */
background: linear-gradient(to right, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 ); /* IE6-9 */
transition: all 0.2s ease-out;
cursor: pointer;
border-radius: 0.35em;
box-shadow:
0 0 1px 2px rgba(0,0,0,0.7),
inset 0 2px 0 rgba(255,255,255,0.6),
inset 0 -1px 0 1px rgba(0,0,0,0.3),
0 8px 10px rgba(0,0,0,0.15);
}
.switch:before {
display:block;
position: absolute;
left: -35px; right: -35px;
top: -25px; bottom: -25px;
z-index: -2;
content: "";
border-radius: 0.4em;
background: #d5dde0;
background: linear-gradient(#d7dfe2, #bcc7cd);
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.6),
inset 0 -1px 1px 1px rgba(0,0,0,0.3),
0 0 8px 2px rgba(0,0,0,0.2),
0 2px 4px 2px rgba(0,0,0,0.1);
pointer-events: none;
transition: all 0.2s ease-out;
}
.switch:after {
content: "";
position: absolute;
right: -25px;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: #788b91;
margin-top: -8px;
z-index: -1;
box-shadow:
inset 0 -1px 8px rgba(0,0,0,0.7),
inset 0 -2px 2px rgba(0,0,0,0.2),
0 1px 0 white,
0 -1px 0 rgba(0,0,0,0.5),
-47px 32px 15px 13px rgba(0,0,0,0.25);
}
#switch:checked ~ .switch {
background: #b7bfc2; /* Old browsers */
background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* IE10+ */
background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 ); /* IE6-9 */
}
#switch:checked ~ .switch:after {
background: #b1ffff;
box-shadow:
inset 0 -1px 8px rgba(0,0,0,0.7),
inset 0 -2px 2px rgba(0,0,0,0.2),
0 1px 0 white,
0 -1px 0 rgba(0,0,0,0.5),
-110px 32px 15px 13px rgba(0,0,0,0.25);
}
Raw
lightswitch_button.html
<input type="checkbox" id="switch" name="switch">
<label for="switch" class="switch"></label>
Raw
liquid.css
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.btn-liquid {
display: inline-block;
position: relative;
width: 240px;
height: 60px;
border-radius: 27px;
color: #fff;
font: 700 14px/60px "Droid Sans", sans-serif;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.btn-liquid .inner {
position: relative;
z-index: 2;
}
.btn-liquid canvas {
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
z-index: 1;
}
Raw
liquid.js
$(function() {
// Vars
var pointsA = [],
pointsB = [],
$canvas = null,
canvas = null,
context = null,
vars = null,
points = 8,
viscosity = 20,
mouseDist = 70,
damping = 0.05,
showIndicators = false;
mouseX = 0,
mouseY = 0,
relMouseX = 0,
relMouseY = 0,
mouseLastX = 0,
mouseLastY = 0,
mouseDirectionX = 0,
mouseDirectionY = 0,
mouseSpeedX = 0,
mouseSpeedY = 0;
/**
* Get mouse direction
*/
function mouseDirection(e) {
if (mouseX < e.pageX)
mouseDirectionX = 1;
else if (mouseX > e.pageX)
mouseDirectionX = -1;
else
mouseDirectionX = 0;
if (mouseY < e.pageY)
mouseDirectionY = 1;
else if (mouseY > e.pageY)
mouseDirectionY = -1;
else
mouseDirectionY = 0;
mouseX = e.pageX;
mouseY = e.pageY;
relMouseX = (mouseX - $canvas.offset().left);
relMouseY = (mouseY - $canvas.offset().top);
}
$(document).on('mousemove', mouseDirection);
/**
* Get mouse speed
*/
function mouseSpeed() {
mouseSpeedX = mouseX - mouseLastX;
mouseSpeedY = mouseY - mouseLastY;
mouseLastX = mouseX;
mouseLastY = mouseY;
setTimeout(mouseSpeed, 50);
}
mouseSpeed();
/**
* Init button
*/
function initButton() {
// Get button
var button = $('.btn-liquid');
var buttonWidth = button.width();
var buttonHeight = button.height();
// Create canvas
$canvas = $('<canvas></canvas>');
button.append($canvas);
canvas = $canvas.get(0);
canvas.width = buttonWidth+100;
canvas.height = buttonHeight+100;
context = canvas.getContext('2d');
// Add points
var x = buttonHeight/2;
for(var j = 1; j < points; j++) {
addPoints((x+((buttonWidth-buttonHeight)/points)*j), 0);
}
addPoints(buttonWidth-buttonHeight/5, 0);
addPoints(buttonWidth+buttonHeight/10, buttonHeight/2);
addPoints(buttonWidth-buttonHeight/5, buttonHeight);
for(var j = points-1; j > 0; j--) {
addPoints((x+((buttonWidth-buttonHeight)/points)*j), buttonHeight);
}
addPoints(buttonHeight/5, buttonHeight);
addPoints(-buttonHeight/10, buttonHeight/2);
addPoints(buttonHeight/5, 0);
// addPoints(x, 0);
// addPoints(0, buttonHeight/2);
// addPoints(0, buttonHeight/2);
// addPoints(buttonHeight/4, 0);
// Start render
renderCanvas();
}
/**
* Add points
*/
function addPoints(x, y) {
pointsA.push(new Point(x, y, 1));
pointsB.push(new Point(x, y, 2));
}
/**
* Point
*/
function Point(x, y, level) {
this.x = this.ix = 50+x;
this.y = this.iy = 50+y;
this.vx = 0;
this.vy = 0;
this.cx1 = 0;
this.cy1 = 0;
this.cx2 = 0;
this.cy2 = 0;
this.level = level;
}
Point.prototype.move = function() {
this.vx += (this.ix - this.x) / (viscosity*this.level);
this.vy += (this.iy - this.y) / (viscosity*this.level);
var dx = this.ix - relMouseX,
dy = this.iy - relMouseY;
var relDist = (1-Math.sqrt((dx * dx) + (dy * dy))/mouseDist);
// Move x
if ((mouseDirectionX > 0 && relMouseX > this.x) || (mouseDirectionX < 0 && relMouseX < this.x)) {
if (relDist > 0 && relDist < 1) {
this.vx = (mouseSpeedX / 4) * relDist;
}
}
this.vx *= (1 - damping);
this.x += this.vx;
// Move y
if ((mouseDirectionY > 0 && relMouseY > this.y) || (mouseDirectionY < 0 && relMouseY < this.y)) {
if (relDist > 0 && relDist < 1) {
this.vy = (mouseSpeedY / 4) * relDist;
}
}
this.vy *= (1 - damping);
this.y += this.vy;
};
/**
* Render canvas
*/
function renderCanvas() {
// rAF
rafID = requestAnimationFrame(renderCanvas);
// Clear scene
context.clearRect(0, 0, $canvas.width(), $canvas.height());
context.fillStyle = '#fff';
context.fillRect(0, 0, $canvas.width(), $canvas.height());
// Move points
for (var i = 0; i <= pointsA.length - 1; i++) {
pointsA[i].move();
pointsB[i].move();
}
// Create dynamic gradient
var gradientX = Math.min(Math.max(mouseX - $canvas.offset().left, 0), $canvas.width());
var gradientY = Math.min(Math.max(mouseY - $canvas.offset().top, 0), $canvas.height());
var distance = Math.sqrt(Math.pow(gradientX - $canvas.width()/2, 2) + Math.pow(gradientY - $canvas.height()/2, 2)) / Math.sqrt(Math.pow($canvas.width()/2, 2) + Math.pow($canvas.height()/2, 2));
var gradient = context.createRadialGradient(gradientX, gradientY, 300+(300*distance), gradientX, gradientY, 0);
gradient.addColorStop(0, '#102ce5');
gradient.addColorStop(1, '#E406D6');
// Draw shapes
var groups = [pointsA, pointsB]
for (var j = 0; j <= 1; j++) {
var points = groups[j];
if (j == 0) {
// Background style
context.fillStyle = '#1CE2D8';
} else {
// Foreground style
context.fillStyle = gradient;
}
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for (var i = 0; i < points.length; i++) {
var p = points[i];
var nextP = points[i + 1];
var val = 30*0.552284749831;
if (nextP != undefined) {
// if (nextP.ix > p.ix && nextP.iy < p.iy) {
// p.cx1 = p.x;
// p.cy1 = p.y-val;
// p.cx2 = nextP.x-val;
// p.cy2 = nextP.y;
// } else if (nextP.ix > p.ix && nextP.iy > p.iy) {
// p.cx1 = p.x+val;
// p.cy1 = p.y;
// p.cx2 = nextP.x;
// p.cy2 = nextP.y-val;
// } else if (nextP.ix < p.ix && nextP.iy > p.iy) {
// p.cx1 = p.x;
// p.cy1 = p.y+val;
// p.cx2 = nextP.x+val;
// p.cy2 = nextP.y;
// } else if (nextP.ix < p.ix && nextP.iy < p.iy) {
// p.cx1 = p.x-val;
// p.cy1 = p.y;
// p.cx2 = nextP.x;
// p.cy2 = nextP.y+val;
// } else {
p.cx1 = (p.x+nextP.x)/2;
p.cy1 = (p.y+nextP.y)/2;
p.cx2 = (p.x+nextP.x)/2;
p.cy2 = (p.y+nextP.y)/2;
context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
// continue;
// }
// context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);
} else {
nextP = points[0];
p.cx1 = (p.x+nextP.x)/2;
p.cy1 = (p.y+nextP.y)/2;
context.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);
}
}
// context.closePath();
context.fill();
}
if (showIndicators) {
// Draw points
context.fillStyle = '#000';
context.beginPath();
for (var i = 0; i < pointsA.length; i++) {
var p = pointsA[i];
context.rect(p.x - 1, p.y - 1, 2, 2);
}
context.fill();
// Draw controls
context.fillStyle = '#f00';
context.beginPath();
for (var i = 0; i < pointsA.length; i++) {
var p = pointsA[i];
context.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);
context.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);
}
context.fill();
}
}
// Init
initButton();
});
Raw
liquid_button.html
<a href="http://waaark.com" class="btn-liquid">
<span class="inner">Liquid button ?</span>
</a>
Raw
neumorphic.sass
@import compass
// Squishy buttons inspired by https://goo.gl/bFCyS
@import url(https://fonts.googleapis.com/css?family=Lato:700)
html, body
font-family: 'Lato', sans-serif
background: url(https://s.cdpn.io/1715/dark_stripes.png)
text-align: center
height: 100%
.container
text-align: center
position: absolute
margin-top: -80px
width: 100%
top: 50%
.toggle
margin: 4px
display: inline-block
.toggle
$size: 140px
box-shadow: inset 0 0 35px 5px rgba(0,0,0,0.25), inset 0 2px 1px 1px rgba(255,255,255,0.9), inset 0 -2px 1px 0 rgba(0,0,0,0.25)
border-radius: 8px
background: #ccd0d4
position: relative
height: $size
width: $size
&:before
$radius: $size * 0.845
$glow: $size * 0.125
box-shadow: 0 0 $glow $glow / 2 #fff
border-radius: $radius
background: #fff
position: absolute
margin-left: ( $radius - $glow ) * -0.5
margin-top: ( $radius - $glow ) * -0.5
opacity: 0.2
content: ''
height: $radius - $glow
width: $radius - $glow
left: 50%
top: 50%
.button
$radius: $size * 0.688
-webkit-filter: blur(1px)
-moz-filter: blur(1px)
filter: blur(1px)
transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.5), inset 0 -3px 4px -1px rgba(0,0,0,0.2), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 3px 4px -1px rgba(255,255,255,0.2), inset 0 0 5px 1px rgba(255,255,255,0.8), inset 0 20px 30px 0 rgba(255,255,255,0.2)
border-radius: $radius
position: absolute
background: #ccd0d4
margin-left: $radius * -0.5
margin-top: $radius * -0.5
display: block
height: $radius
width: $radius
left: 50%
top: 50%
.label
transition: color 300ms ease-out
text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0,0,0,0.8), 1px 1px 4px #fff
line-height: $size - 1
text-align: center
position: absolute
font-weight: 700
font-size: 42px
display: block
opacity: 0.9
height: 100%
width: 100%
color: rgba(0,0,0,0.4)
input
opacity: 0
background :red
position: absolute
cursor: pointer
z-index: 1
height: 100%
width: 100%
left: 0
top: 0
&:active
~ .button
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 30px 1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 25px 0 rgba(0,0,0,0.4), inset 0 0 10px 1px rgba(255,255,255,0.6)
~ .label
font-size: 40px
color: rgba(0,0,0,0.45)
&:checked
~ .button
box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4), inset 0 -8px 25px -1px rgba(255,255,255,0.9), 0 -10px 15px -1px rgba(255,255,255,0.6), inset 0 8px 20px 0 rgba(0,0,0,0.2), inset 0 0 5px 1px rgba(255,255,255,0.6)
~ .label
font-size: 40px
color: rgba(0,0,0,0.4)
Raw
neumorphic_button.html
<div class="container">
<div class="toggle">
<input type="checkbox">
<span class="button"></span>
<span class="label">+</span>
</div>
<div class="toggle">
<input type="checkbox" checked>
<span class="button"></span>
<span class="label">–</span>
</div>
</div>
Raw
transitions.scss
body{
background: #1D1D1D;
}
section#button-container{
display: inline-block;
width: 100%;
.container{
max-width: 900px;
margin: 0 auto;
position: relative;
display: block;
float:left;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
.button{
margin: 20px;
float: left;
position: relative;
font-family: arial;
text-transform: uppercase;
color: #fff;
cursor: pointer;
.label{
padding: 10px;
display: inline-block;
}
&.v1 {
.left, .right, .bottom, .top {
background: #f0202f;
position: absolute;
}
.left, .right {
height: 45px;
width: 1px;
}
.top, .bottom {
height: 1px;
width: 30px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
right: 0;
}
.left {
transform: rotate(35deg);
left: -7px;
top: -1px;
}
.right {
transform: rotate(35deg);
right: -7px;
bottom: -1px;
}
}
&.v2{
.icon{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 40px;
height: 1px;
transform: rotate(-45deg);
}
&:before{
left: 0;
}
&:after{
right: 0;
}
}
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
}
&:before{
left: 0;
}
&:after{
right: 0;
}
}
&.v3{
&:hover{
.icon{
&:before, &:after{
width: 35px;
}
span {
&:before, &:after {
height: 35px;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v4{
&:hover{
.icon{
&:before, &:after{
width: 10px;
}
span {
&:before, &:after {
height: 10px;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v5{
&:hover{
.icon{
transform: scale(0.8);
&:before, &:after{
width: 20px;
}
span {
&:before, &:after {
height: 20px;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition:all 0.5s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v6{
&:hover{
.icon{
transform: scale(0.9);
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.5s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v7{
&:hover{
.icon{
transform: scale(0.9) skew(-40deg, 0deg);
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.5s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v8{
&:hover{
.icon{
transform: scale(1.1) skew(-40deg, 0deg);
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.5s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.5s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v9{
&:hover{
.icon{
transform: scale(1.1) skew(-40deg, 0deg);
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
transition-delay: 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v10{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
transition-delay: 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v11{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v12{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before{
width: 0;
}
&:after{
width: 100%;
}
span {
&:before, &:after {
height: 0;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: width 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: height 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v12{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before{
width: 0;
}
&:after{
width: 50%;
right: 25%;
}
span {
&:before, &:after {
height: 0;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v13{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before, &:after{
width: 60px;
}
&:before{
left: calc(50% - 30px);
}
&:after{
right: calc(50% - 30px);
}
span {
&:before, &:after {
height: 0;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0.4s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v14{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before, &:after{
width: 60px;
transition-delay: 0.4s;
}
&:before{
left: calc(50% - 30px);
}
&:after{
right: calc(50% - 30px);
}
span {
&:before, &:after {
height: 0;
transition-delay: 0s;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.4s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v15{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before, &:after{
width: 60px;
}
&:before{
left: calc(50% - 30px);
}
&:after{
right: calc(50% - 30px);
}
span {
&:before, &:after {
height: calc(100% - 20px);
}
&:before{
top: 10px;
}
&:after{
bottom: 10px;
}
}
}
}
.label{
padding: 10px 22px;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v16{
&:hover{
.icon{
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
.icon2{
transform: skew(-40deg, 0deg) scaleX(1);
background: #f0202f;
z-index: -1;
}
}
.label{
padding: 10px 22px;
}
.icon2 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg) scaleX(0.2);
transition: all 0.2s;
transition-delay: 0.2s;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v17{
&:hover{
.icon{
&:before, &:after{
width: 100%;
}
span {
&:before, &:after {
height: 100%;
}
}
}
.icon2{
transform: skew(-40deg, 0deg) scale(1);
background: #f0202f;
z-index: -1;
}
}
.label{
padding: 10px 22px;
}
.icon2 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg) scaleX(0.2) scaleY(0.5);
transition: all 0.2s;
transition-delay: 0.2s;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.2s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v18{
&:hover{
.icon{
transform: scale(0.9) skew(0deg, 0deg);
&:before, &:after{
width: 60px;
transition-delay: 0.4s;
}
&:before{
left: calc(50% - 30px);
}
&:after{
right: calc(50% - 30px);
}
span {
&:before, &:after {
height: 0;
transition-delay: 0s;
}
}
}
.icon2{
transform: skew(-40deg, 0deg) scaleX(1);
background: #f0202f;
z-index: -1;
transition-delay: 0.5s;
}
}
.label{
padding: 10px 22px;
}
.icon2 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg) scaleX(0.2);
transition: all 0.2s;
}
.icon{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
transition: all 0.2s;
&:before, &:after{
content: '';
height: 1px;
width: 30px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.2s;
transition-delay: 0s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
span{
&:before, &:after{
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
height: 30px;
transition: all 0.2s;
transition-delay: 0.4s;
}
&:before{
left: 0;
top: 0;
}
&:after{
right: 0;
bottom: 0;
}
}
}
}
&.v19{
.label {
padding: 10px 30px;
font-family: arial;
font-size: 14px;
display: inline-block;
z-index: 10;
position: relative;
white-space: nowrap;
line-height: 24px;
transition: all 0.225s;
transition-delay: 0.45s;
letter-spacing: 2px;
}
&.button-start{
.label{
padding: 12px 65px;
}
}
.icon2 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.225s;
transform: skew(-40deg, 0deg) scaleX(1);
background: rgba(#f0202f, 0.8);
transition-delay: 0.45s;
}
.icon {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.225s;
transform: scale(0.9) skew(0deg, 0deg);
transition-delay: 0.15s;
&:before, &:after {
width: 60px;
opacity: 0;
content: '';
height: 1px;
position: absolute;
display: block;
background: #f0202f;
transition: all 0.375s;
transition-delay: 0.3s;
}
&:before {
top: 0;
left: calc(50% - 30px);
}
&:after {
bottom: 0;
right: calc(50% - 30px);
}
span {
&:before, &:after {
height: 0;
transition-delay: 0s;
content: '';
background: #f0202f;
position: absolute;
display: block;
width: 2px;
transition: all 0.225s;
}
&:before {
left: 0;
top: 0;
}
&:after {
right: 0;
bottom: 0;
}
}
}
&:hover {
.icon {
transform: skew(-40deg, 0deg);
&:before, &:after {
transition-delay: 0s;
width: 30px;
opacity: 1;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
span {
&:before, &:after {
height: 30px;
transition-delay: 0.45s;
}
}
}
.icon2 {
transform: skew(-40deg, 0deg) scaleX(0.2);
background: transparent;
transition-delay: 0s;
opacity: 0;
}
}
&.white{
&:hover {
.label{
color: #fff;
transition-delay: 0s;
}
}
.icon2 {
background: #fff;
}
.icon {
&:before, &:after {
background: #fff;
}
span {
&:before, &:after {
background: #fff;
}
}
}
}
&.labelred{
.label{
color: #f0202f;
}
}
&.labelgray{
.label{
color: #1D1D1D;
}
}
&.transparent{
float: none;
display: inline-block;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
.label{
color: #fff;
transition-delay: 0s;
}
.icon2 {
background: transparent;
}
.icon {
transform: scale(1) skew(10deg, 0deg);
&:before, &:after {
background: #fff;
}
span {
&:before, &:after {
background: #fff;
}
}
}
&:hover {
.icon {
transform: scale(1) skew(-40deg, 0deg);
}
}
}
}
}
}
Raw
transitions_button.html
<section id="button-container">
<div class="container">
<div class="button v3">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v4">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v5">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v6">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v7">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v8">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v9">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v10">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v11">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v12">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v13">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v14">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v15">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
</div>
<div class="button v16">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
<span class="icon2">
</span>
</div>
<div class="button v17">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
<span class="icon2">
</span>
</div>
<div class="button v18">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
<span class="icon2">
</span>
</div>
</div>
<div class="container">
<div class="button v19">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
<span class="icon2">
</span>
</div>
<div class="button v19 white labelgray">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
<span class="icon2">
</span>
</div>
<div class="button v19 transparent">
<span class="label">Button</span>
<span class="icon">
<span></span>
</span>
<span class="icon2">
</span>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment