Skip to content

Instantly share code, notes, and snippets.

@moly4u

moly4u/SCSS Hover Implode.markdown

Created February 26, 2016 19:56
Show Gist options
  • Save moly4u/a0bec0d5cacc4caaa594 to your computer and use it in GitHub Desktop.
Save moly4u/a0bec0d5cacc4caaa594 to your computer and use it in GitHub Desktop.
Download ZIP
SCSS Hover Implode
Raw
index.html
<div class="main-button">
<div class="button-overlay"></div>
<span>Hover Me</span>
</div>
<h1>- Implode : Benjamin Vilina -</h1>
Raw
SCSS Hover Implode.markdown
Raw
style.css
@import "bourbon";
@import url(http://fonts.googleapis.com/css?family=Strait);
$font-strait: 'Strait', sans-serif;
//colors
$color-batman: #000;
$color-cloud: #eceeef;
$color-snow: #fff;
$color-gold: #A1673E;
$color-lightwolf: #878f92;
$color-wolf: #5a5959;
body {
font-family: $font-strait;
padding-top: 100px;
}
h1 {
text-transform: uppercase;
font-size: 1.4em;
color: $color-lightwolf;
text-align: center;
}
.main-button {
background: rgba(0,0,0,0.6);
padding: 20px 30px 20px 30px;
display: block;
text-align: center;
position: relative;
max-width: 300px;
font-size: 2em;
margin: 0 auto;
text-transform: uppercase;
color: $color-snow;
font-family: $font-strait;
overflow: hidden;
border: solid 2px $color-gold;
@include transition (all .3s);
span {
position: relative;
z-index: 1;
}
.button-overlay {
position:absolute;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
height: 0;
width: 0;
@include transition (all .4s);
border-radius: 50%;
background: rgba(161, 103, 62, .8);
top: 30px;
}
&:hover {
border: solid 2px $color-snow;
cursor: pointer;
@include transition (all .6s);
.button-overlay {
width: 600px;
top: -180px;
height: 600px;
left: -40px;
@include transition (all .4s);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment