Skip to content

Instantly share code, notes, and snippets.

@PDXIII

PDXIII/Nice Button Effect

Last active April 13, 2023 19:33
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PDXIII/5720818 to your computer and use it in GitHub Desktop.
Save PDXIII/5720818 to your computer and use it in GitHub Desktop.
Download ZIP
Less mixin for a nice button effect. see it in action http://pdxiii.github.io/JimmyStash
Raw
Nice Button Effect
// see it in action http://pdxiii.github.io/JimmyStash
.buttonFX (@color) {
color: darken(@color, 30%);
border-top: solid 2px lighten(@color, 10%);
border-left: solid 2px lighten(@color, 10%);
border-right: solid 2px darken(@color, 10%);
border-bottom: solid 2px darken(@color, 10%);
background-color: @color;
box-shadow: inset 10px 10px 10px lighten(@color, 15%),
inset -10px -10px 10px darken(@color, 15%),
5px 5px 10px rgba(0,0,0,0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment