A collection of Flat buttons with a little animation I made. Pure CSS with SCSS.
A Pen by Benjamin Vilina on CodePen.
-
-
Save CodeMyUI/f9c8a7459eef2f6f5788 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Lord Jesus there is a button |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment