Advanced Search

css button effect

/ Published in: CSS
Save to your folder(s)
for my reference only. button transition effect and box shadow for everyday use

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.