Posted By

roflman79 on 03/02/11


Tagged

css CSS3 less lessjs


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

Adrian
clinicdigital


CSS3 Bevelled Button LESS Mixin


 / Published in: CSS
 

  1. /* I am using classes from http://snipplr.com/view/47181/less-classes/ for border radius */
  2.  
  3. .css3button(
  4. @bg : #666,
  5. @border : 1px,
  6. @border-rad : 0.3em
  7. ){
  8. display:inline-block;
  9. outline:none;
  10. line-height:2em;
  11. border:@border solid desaturate(darken(@bg,10%),50%);
  12. background: -webkit-gradient(linear, 0 0, 0 100%,
  13. from(lighten(@bg,60%)),
  14. color-stop(3%, lighten(@bg,30%)),
  15. color-stop(100%, @bg),
  16. );
  17. background: -moz-linear-gradient(top,
  18. lighten(@bg,60%) 0%,
  19. lighten(@bg,30%) 3%,
  20. @bg 100%);
  21. text-shadow: 0 1px 1px rgba(255,255,255,0.6);
  22. .border-radius(@border-rad);
  23. color:desaturate(darken(@bg,20%),50%);
  24. font-weight:bold;
  25. text-decoration:none;
  26. padding:0 1em;
  27.  
  28. &:active {
  29.  
  30. background: -moz-linear-gradient(top,
  31. lighten(@bg,30%) 0%,
  32. @bg 2%,
  33. lighten(@bg,30%) 100%);
  34. background: -webkit-gradient(linear, 0 0, 0 100%,
  35. from(lighten(@bg,30%)),
  36. color-stop(2%, @bg),
  37. color-stop(100%, lighten(@bg,30%)),
  38. );
  39. text-shadow: 0 -1px 1px rgba(255,255,255,0.6);
  40. }
  41.  
  42. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: roflman79 on March 3, 2011

Just simply do the following to create a button, works with hex or rgba. If you don't want down states just remove all the code for :active

a { .css3button(#ff0000); /* red button */ }

You need to login to post a comment.