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.

  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.