Posted By

melaychie on 09/14/14


Tagged

button box transition shadow


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

nikebarart
JeffSFO


css button effect


 / Published in: CSS
 

for my reference only. button transition effect and box shadow for everyday use

  1. .button.secondary {
  2. text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
  3. background-image: -webkit-linear-gradient( #ffefc3, #ffdf89);
  4. background-image: linear-gradient( #ffefc3, #ffdf89);
  5. color: #b68733;
  6. border: 1px solid #dab861;
  7. box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.7),inset 0 -1px 0px rgba(218, 184, 97, 0.4);
  8. }
  9. .button.radius {
  10. -webkit-border-radius: 5px;
  11. border-radius: 5px;
  12. }
  13.  
  14. .button.secondary {
  15. transition: all 2.25s;
  16. padding: 10px;
  17. text-decoration: none;
  18. }
  19. .background {
  20. background: #85c3af;
  21. background-image: -webkit-linear-gradient( #77af9d, #cee7df);
  22. background-image: linear-gradient( #77af9d, #cee7df);
  23. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  24. background-position: 36px 0px !important;
  25. background-size: auto 36px !important;
  26. }

Report this snippet  

You need to login to post a comment.