A collection of Flat buttons with a little animation I made. Pure CSS with SCSS.
A Pen by Benjamin Vilina on CodePen.
<div class="headText"> | |
<h1>Flat Buttons</h1> | |
<span class="smaller">- by ben -</span> | |
</div> | |
<hr /> | |
<ul class="buttonChest"> | |
<li> | |
<div class="button navy">Button</div> | |
<span class="click">Click Me</span> | |
</li> | |
<li> | |
<div class="button red">Button</div> | |
<span class="click">I Rock</span> | |
</li> | |
<li> | |
<div class="button api">Button</div> | |
<span class="click">Cats Meow</span> | |
</li> | |
<li> | |
<div class="button chalk">Button</div> | |
<span class="click">Lame</span> | |
</li> | |
<li> | |
<div class="button ocean">Button</div> | |
<span class="click">Alliance</span> | |
</li> | |
<li> | |
<div class="button drab">Button</div> | |
<span class="click">U.S. Army</span> | |
</li> | |
<li> | |
<div class="button teal">Button</div> | |
<span class="click">Neat</span> | |
</li> | |
<li> | |
<div class="button jason">Button</div> | |
<span class="click">Horde</span> | |
</li> | |
<li> | |
<div class="button chalk">Button</div> | |
<span class="click">Too Ez</span> | |
</li> | |
<li> | |
<div class="button darkRed">Button</div> | |
<span class="click">Lord Jesus Fire</span> | |
</li> | |
<li> | |
<div class="button navy">Button</div> | |
<span class="click">Hi Tom</span> | |
</li> | |
<li> | |
<div class="button red">Button</div> | |
<span class="click">Cats</span> | |
</li> | |
</ul> |
//Lord Jesus there is a button |
@import "bourbon"; | |
@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700); | |
//Font Vars | |
$lato: 'Lato', sans-serif; | |
//Color Vars | |
$snow: #fff; | |
$navy: #2c3e50; | |
$red: #e74c3c; | |
$chalk: #ecf0f1; | |
$ocean: #3498db; | |
$api: #2980b9; | |
$coal: #4d4d4d; | |
$drab: #3f4036; | |
$teal: #8da681; | |
$jason: #bf2806; | |
$darkRed: #8c1d04; | |
body { | |
background: #c4c4c4; | |
} | |
.headText { | |
text-align: center; | |
color: $coal; | |
font-family: $lato; | |
text-transform: uppercase; | |
h1 { | |
font-size: 6em; | |
font-weight: 100; | |
margin-bottom: 0; | |
margin-top: 0; | |
} | |
.smaller { | |
font-weight: 100; | |
text-transform: none; | |
font-size: 1.4em; | |
} | |
} | |
.buttonChest { | |
top: 20px; | |
position: relative; | |
list-style: none; | |
display: block; | |
width: 100%; | |
max-width: 1480px; | |
margin: 0 auto; | |
li { | |
display: inline-block; | |
position: relative; | |
min-height: 80px; | |
margin: 20px; | |
@include transition(all .4s); | |
.click { | |
position: absolute; | |
text-align: center; | |
font-family: $lato; | |
color: $coal; | |
text-transform: uppercase; | |
width: 100%; | |
top: 16px; | |
z-index: -1; | |
@include transition(all .4s); | |
} | |
&:hover .click{ | |
@include transition(all .4s); | |
background: $snow; | |
top: 56px; | |
position: absolute; | |
padding-top: 4px; | |
padding-bottom: 5px; | |
} | |
&:hover{ | |
@include transition(all .4s); | |
@include transform(scale(0.9) rotate(3deg)); | |
} | |
} | |
} | |
.button { | |
font-family: $lato; | |
font-size: 1.8em; | |
color: $snow; | |
font-weight: 400; | |
text-transform: uppercase; | |
padding: 10px 40px 10px 40px; | |
cursor: pointer; | |
box-shadow: 0 4px 5px 0 rgba(50, 50, 50, 0.75); | |
@include transition(all .2s); | |
&:hover { | |
@include transition(all .4s); | |
box-shadow: none; | |
border-bottom: solid 8px $snow; | |
border-top-left-radius: 10px; | |
border-top-right-radius: 10px; | |
} | |
} | |
@media only screen and (max-width: 762px) { | |
.headText { | |
h1 { | |
font-size: 4em; | |
} | |
} | |
} | |
//Button Color Styles | |
.navy { background: $navy; } | |
.red { background: $red; } | |
.ocean { background: $ocean; } | |
.api { background: $api; } | |
.chalk { background: $chalk; color: $coal; } | |
.drab { background: $drab; } | |
.teal { background: $teal; } | |
.jason { background: $jason; } | |
.darkRed { background: $darkRed; } |