Your Ad Here

advanced code snippet search

Posted By

reynish on 02/07/11


Tagged

css html buttons


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

saman


Text Buttons

 / Published in: CSS
 

A quick template I made for making anchors look like nice big buttons.

Expand | Embed | Plain Text 
  1. /*
  2. <a class="textButton" href="#"><span class="tbSpan">textButton</span></a>
  3. */
  4.  
  5. .textButton, .tbSpan { display: block; width: 200px; -moz-border-radius: 30px; border-radius: 30px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; }
  6. .textButton { margin-bottom: 10px; text-align: center; text-decoration: none; background: aqua; }
  7.  
  8. .tbSpan { 
  9. padding: 15px 0;
  10. color: #000; 
  11. /*  firefox */
  12. background: -moz-linear-gradient(top, hsla(0,0%,100%,.4) 0%, hsla(0,0%,100%,.0) 50%, hsla(0,0%,0%,.2) 100%); 
  13. /*  webkit  */
  14. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,100%,.4)), color-stop(50%,hsla(0,0%,100%,.0)),  color-stop(100%,hsla(0,0%,0%,.2))); 
  15. }
  16. .tbSpan:hover { 
  17. /*  firefox */
  18. background: -moz-linear-gradient(top, hsla(0,0%,0%,.4) 0%, hsla(0,0%,100%,.0) 50%, hsla(0,0%,100%,.4) 50%); 
  19. /*  webkit  */
  20. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,0%,.3)), color-stop(50%,hsla(0,0%,100%,.0)),  color-stop(100%,hsla(0,0%,100%,.4))); 
  21. }

Report this snippet  

You need to login to post a comment.