Colourful Stylish Buttons

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
JAVASCRIPT
Expand for more options Login