.v-align
.hero-btn
%button.btn
Click
- (1..35).each do |i|
%span.particles-circle
<!-- follow me template -->
.made-with-love
Made With
%span ♥
by
%a{ :href => "https://codepen.io/nikhil8krishnan", :target => "_blank"}Nikhil Krishnan
| Inspired Dribble Shot from
%a.dribble{ :href => "https://dribbble.com/shots/3975065-With-a-Click-of-a-Button", :target => "_blank"}
Gal Shir
%img{ :src => "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2YWQ3MDE1Zi0yMjAwLTRiMDYtYWExOC1jNTlhOWFhYmI2ZTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTg2MTZEMDA2NjZBMTFFM0IzQ0VENjdGQ0VEQ0YzREIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUM1QzJFRUE2NjY5MTFFM0IzQ0VENjdGQ0VEQ0YzREIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTM3NTA4NzQtNDBhNy00NGNjLWEwMWUtZjc2YzdiYTNlOWEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZhZDcwMTVmLTIyMDAtNGIwNi1hYTE4LWM1OWE5YWFiYjZlMiIvPiA8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"}
View Compiled
@import "compass";
//loader options
$theme: #ff0083;
$loader-size: 150px;
$speed: 1.5s;
.hero-btn {
position: relative;
width: 200px;
margin: auto;
height: 66px;
.btn {
background-color: $theme;
border: none;
outline: none;
text-decoration: none;
text-transform: uppercase;
color: #fff;
display: inline-block;
width: 200px;
height: 66px;
text-align: center;
line-height: 66px;
font-size: 22px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
letter-spacing: 2px;
@include border-radius(6px);
white-space: nowrap;
text-overflow: ellipsis;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-appearance: none;
cursor: pointer;
-webkit-appearance: none;
@include box-shadow(0 15px 40px rgba($theme,0.5));
@include transform(perspective(600px) rotateX(0deg) scale(1));
@include transition(all 0.2s linear);
&:hover {
background-color: darken($theme, 5%);
@include box-shadow(0 20px 40px rgba($theme,0.5));
}
&:active{
@include transform(perspective(600px) rotateX(15deg) scale(0.9));
font-size: 21px;
@include box-shadow(0 20px 40px rgba($theme,0.5));
}
.active &:active{
@include transform(perspective(600px) rotateX(0deg) scale(1));
font-size: 22px;
@include box-shadow(0 15px 40px rgba($theme,0.5));
}
}
.particles-circle{
position: absolute;
background-color: $theme;
width: 30px;
height: 30px;
top: 10px;
left: 50%;
margin-left: -15px;
z-index: -1;
@include border-radius(50%);
@include transform(scale(0));
visibility: hidden;
&:nth-of-type(odd) {
border: solid 2px $theme;
background-color: transparent;
}
@for $i from 1 through 35 {
@keyframes particles-#{$i} {
from {
transform: scale(1);
visibility: visible;
}
to {
left: random(500) - 250 + 0px;
top: random(500) - 250 + 0px;
transform: scale(0);
visibility: hidden;
}
}
.active &:nth-of-type(#{$i}) {
animation: particles-#{$i} $speed ($i / 40) + 0s;
}
}
}
}
.v-align {
position: absolute;
text-align: center;
left: 0;
width: 100%;
max-height: 90vh;
top: 50%;
@include transform(translateY(-50%));
}
.wrap__sparks {
transform: translateZ(-100px);
& .spark {
}
}
////page styles
@import url("https://fonts.googleapis.com/css?family=Montserrat:400, 600");
* {
@include box-sizing(border-box);
}
html,
body {
min-height: 100%;
}
body {
background: #f8faff;
height: 100vh;
position: relative;
}
h1 {
font-size: 24px;
display: block;
text-align: center;
color: #6a11cb;
font-weight: 500;
}
//follow me template
.made-with-love {
position: fixed;
//background-color: #131418;
left: 0;
width: 100%;
bottom: 10px;
text-align: center;
font-size: 10px;
z-index: 9999;
font-family: arial;
color: $theme;
font-weight: 600;
i {
font-style: normal;
font-size: 14px;
position: relative;
top: 2px;
}
a {
color: $theme;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.dribble{
img{
max-width: 100%;
width: 26px;
position: relative;
top: -2px;
vertical-align: middle;
}
}
}
View Compiled
$('.hero-btn').click(function(){
if(!$('.hero-btn').parent().hasClass('active')){
$(this).parent().stop().addClass('active');
setTimeout(function(){
$('.hero-btn').parent().removeClass('active');
}, 2000);
}
});
This Pen doesn't use any external CSS resources.