Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created June 12, 2018 21:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/f2ec221bc20523356f0e2da16aa2c45a to your computer and use it in GitHub Desktop.
Save CodeMyUI/f2ec221bc20523356f0e2da16aa2c45a to your computer and use it in GitHub Desktop.
Shiny button
<a href="#" class="shiny-btn">Call to action</a>

Shiny button

Shiny captivating and flat button for call to action, with only CSS.

A Pen by Antonio on CodePen.

License.

@import "bourbon@5.*"
@import "neat@2.*"
@import url('https://fonts.googleapis.com/css?family=Montserrat:700')
body
background-color: beige
font-family: 'Montserrat', sans-serif
display: flex
justify-content: center
align-items: center
height: 100vh
.shiny-btn
color: white
font-weight: bold
font-size: 2rem
text-decoration: none
text-transform: uppercase
padding: 40px 90px
background-color: #7681b9
transition: transform 500ms $ease-in-out-back, background-position 800ms $ease-in-out-back, box-shadow 500ms linear
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1296px" height="768px" viewBox="0 0 1296 768" enable-background="new 0 0 1296 768" xml:space="preserve"><g><polygon fill="#8694D1" points="766.6,1.2 -0.2,768 200.7,768 967.5,1.2 "/></g><g><polygon fill="#8694D1" points="1094.8,1.2 328,768 528.9,768 1295.7,1.2 "/></g></svg>')
background-size: contain
background-position: -200px center
background-repeat: no-repeat
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
&:hover
transform: scale(1.1)
background-position: -60px
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
&:active
transform: scale(1)
background-position: 500px
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment