HTML
<main class="introduction">
<h1>Stylish Buttons</h1>
<button class="btn">
<div class="ion ion-heart"></div><span> Heart Me!</span>
</button>
<p>Great for your project.</p>
</main>
<section class="blue-red">
<div class="flex">
<button class="btn">
<div class="ion ion-happy"></div><span> Happy</span>
</button>
<button class="btn">
<div class="ion ion-sad"></div><span> Sad</span>
</button>
</div>
</section>
<section class="green-yellow">
<div class="flex">
<button class="btn">
<div class="ion ion-ios-plus"></div><span> Plus</span>
</button>
<button class="btn">
<div class="ion ion-ios-minus"></div><span> Minus</span>
</button>
</div>
</section>
<section class="last">
<div class="flex">
<button class="btn">
<div class="ion ion-arrow-left-a"></div><span> Left</span>
</button>
<button class="btn">
<div class="ion ion-arrow-right-a"></div><span> Right</span>
</button>
</div>
</section>
SASS
// Variable Colors
$blue: #3498DB
$blue-light: lighten($blue, 12.5%)
$blue-dark: darken($blue, 12.5%)
$red: #EF4836
$red-light: lighten($red, 12.5%)
$red-dark: darken($red, 12.5%)
$yellow: #F5AB35
$yellow-light: lighten($yellow, 12.5%)
$yellow-dark: darken($yellow, 12.5%)
$green: #8CC152
$green-light: lighten($green, 12.5%)
$green-dark: darken($green, 12.5%)
main.introduction
display: flex
align-items: center
justify-content: space-around
flex-direction: column
height: 50vh
background: $blue-dark
h1
display: block
color: $yellow-light
text-shadow: 1px 1px 0px darken($blue-dark, 20%)
font-size: 1.7em
margin: 0
p
display: block
color: $blue-light
text-shadow: 1px 1px 0px darken($blue-dark, 20%)
font-size: 1.45em
margin: 0
button
margin: 0
background: $green
.ion
color: $red-light
&:hover
background: $green-light
.flex
max-width: 800px
width: 100%
display: flex
align-items: center
justify-content: space-around
section
height: 50vh
display: flex
align-items: center
justify-content: center
section.blue-red
background: $yellow-light
button
background: $blue
.ion
color: $red-light
&:hover
background: $blue-light
section.green-yellow
background: $red-light
button
background: $green
.ion
color: $yellow-light
&:hover
background: $green-light
section.last
background: $green-light
button
background: $red
.ion
color: $blue-light
&:hover
background: $red-light
// Buttons
button.btn
border: none
text-shadow: 1px 1px 0px darken($blue-dark, 20%)
box-shadow: 1px 1px 3px #444
color: white
font-size: 1.5em
//margin: 0.75em
padding: 0.175em 0.3em
cursor: pointer
transition: all 300ms ease-in-out
&:hover
box-shadow: 2px 2px 3px #444
body
font:
size: 30px
weight: 300
