<main class="wrapper">
<section class="section top">
<header><h3 class="text-center">- Some button transitions - </h3></header>
<div class="wrap-btns text-center">
<button class="btn style1">Button Style 1</button>
<button class="btn style2">Button Style 2</button>
<button class="btn style3">Button Style 3</button>
</div>
</section>
<section class="section bottom">
<header><h3 class="text-center">- The Infamous Circle Button - </h3></header>
<div>
<div id="circle-wrap">
<a href="#" class="circle-btn">
<div class="border-inactive"></div>
<div class="border-active"></div>
<div class="letter">g</div>
<div class="underline"></div>
</a>
</div></div>
</section>
</main>
@import "compass/css3";
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700|Work+Sans:100,200,400,500,600,700,900');
// Vars
$purple: #8d63db;
$violet: #5b67d5;
$gray: #f9faff;
$aqua: #00cae5;
$turquoise: #00e5c6;
$neon: #bdf030;
$dark: #464646;
$blue: #2E9FFF;
$white: #FFFFFF;
$bg: darken($gray,3%);
$bg2: darken($gray,1%);
$oswald: 'Oswald', sans-serif;
body {
margin: 0;
padding: 0;
background: $bg;
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
text-align: center;
}
.section {
min-height: 50vh;
background: $bg2;
display: flex;
flex-direction: column;
> * {
flex-grow: 1;
}
&.top {
border-bottom: 1px solid darken($gray,5%);
}
&.bottom {
background: $bg;
}
header {
display: flex;
padding: 1rem 0;
h3 {
margin: auto;
}
}
}
.wrap-btns {
// background: pink;
//width: 80%;
//margin: 20px auto 50px auto;
}
h3 {
font-family: 'Quicksand', sans-serif;
font-weight: normal;
font-size: 3rem;
letter-spacing: 7px;
text-shadow: 1px 1px 1px #fff;
}
.btn {
@include border-radius(0);
@include transition(all .2s linear);
padding-top: 0;
padding-bottom: 0;
width: 230px;
margin: 0 10px 10px;
font: 300 14px/50px $oswald;
letter-spacing: .4em;
text-transform: uppercase;
border: 3px solid $aqua;
background: $aqua;
color: darken($white, 2%);
&.style1 {
position: relative;
z-index:1;
&:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
height: 0;
width: 0;
border-radius: 50%;
background: $bg2;
z-index: -1;
@include transform(translate(-50%, -50%));
@include transition(width .3s, height .2s ease-in-out, border-radius .1s linear .05s);
}
&:hover {
color: $violet;
border-color: $violet;
}
&:hover:before {
width: 100%;
height: 100%;
border-radius: 0;
color: $violet;
}
} /* .style1 */
&.style2 {
background: darken($aqua,4%);
border-color: darken($aqua,4%);
@include transition(background .15s linear, border-color .35s ease-out, border-radius .25s ease-out, letter-spacing .2 ease-in, color .2s);
&:hover,
&:active {
border-radius: 34px;
background: transparent;
//letter-spacing: .35em;
color: $purple;
border-color: $purple;
}
} /* .style2 */
&.style3 {
@include transition(color .3s);
position: relative;
background: transparent;
z-index: 1;
background: darken($aqua,8%);
border-color: darken($aqua,8%);
&:after {
position: absolute;
content: '';
border-style: solid;
border-color: $bg;
border-width: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 2px;
z-index: -1;
background: darken($aqua,8%);
@include transition(transform .2s, opacity .2s, border-width .2s);
}
&:hover:after {
/* @include transform(scale(0.96, 0.85)); */
border-width: 4px;
}
} /* .style3 */
&:hover,
&:active {
color: $white;
}
}
/* CIRCLE BUTTON */
#circle-wrap {
width: 102px;
height: 102px;
margin: 0 auto 50px;
text-align: center;
top: 0;
position: relative;
cursor: pointer;
display: block;
@include backface-visibility(hidden);
@include transform(translate(-2px,20px) translateZ(0) translate3d(0,0,0));
@include transform-style(preserve-3d);
a {
text-decoration: none!important;
background: magenta;
}
}
.border-inactive {
height: 100px;
width: 100px;
position: absolute;
//opacity: .3;
border: 6px solid $violet;
@include border-radius(50%);
@include transition(all 700ms cubic-bezier(0.23,1,.32,1) .08s);
@include transform-style(preserve-3d);
a:hover & {
opacity: 0;
border: 2px solid $violet;
@include transform(scale(1.3) translateZ(0) translate3d(0,0,0));
@include transition(all 400ms cubic-bezier(0.23,1,.32,1));
}
}
.border-active {
height: 112px;
width: 112px;
margin: -57px 0 0 -57px;
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
border: 10px solid $aqua;
@include border-radius(50%);
@include transition(all 400ms cubic-bezier(0.23,1,.32,1));
@include transform-style(preserve-3d);
@include transform(scale(.8) translateZ(0) translate3d(0,0,0));
a:hover & {
opacity: 1;
background: $aqua;
@include transform(scale(1) translateZ(0) translate3d(0,0,0));
@include transition(all 700ms cubic-bezier(0.23,1,.32,1) .03s);
}
}
.letter {
font: 60px/45px $oswald;
color: $violet;
//opacity: .4;
position: relative;
@include transform(translate(1px,5px) translateZ(0) translate3d(0,0,0));
@include transform-style(preserve-3d);
@include transition(all 500ms cubic-bezier(0.23,1,.32,1));
a:hover & {
@include transform(translate(1px,1px) translateZ(0) translate3d(0,0,0));
@include transition(all 700ms cubic-bezier(0.23,1,.32,1));
opacity: 1;
//color: $dark;
color: darken($violet,2%);
}
}
.underline {
height: 7px;
width: 31px;
@include transform(translate(1px,30px) translateZ(0) translate3d(0,0,0));
@include transform-style(preserve-3d);
@include transition(all 500ms cubic-bezier(0.23,1,.32,1));
position: relative;
margin: 0 auto;
background: $violet;
//opacity: .4;
a:hover & {
@include transform(translate(1px,35px) translateZ(0) translate3d(0,0,0));
@include transition(all 700ms cubic-bezier(0.23,1,.32,1));
opacity: 1;
// background: $dark;
background: darken($violet,2%);
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.