Posted By

Hedaru on 12/17/10


Tagged

button


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Hedaru


CSS Snow Bar & Ball


 / Published in: CSS
 

Tested in Webkit Browsers. Use the style for a link. You can try different styles: Snow Bar and Snow Ball.

  1. HTML
  2. <a class="snow">Snow Bar!</a> <a class="snow ball">OK!</a>
  3.  
  4. CSS
  5. a.snow {
  6. background: #fffafa;
  7. background: -webkit-gradient( linear, right bottom, right top, color-stop(0, #f0faff), color-stop(.25, #fffafa));
  8. background: -moz-linear-gradient(center bottom, #f0faff 0%, #fffafa 25%);
  9. color: #3296ff;
  10. cursor: pointer;
  11. display: inline-block;
  12. font-size: 1.2em;
  13. font-weight: bold;
  14. padding: 3px 5px;
  15. position: relative;
  16. text-align: center;
  17. text-decoration: none;
  18. border: 2px solid #f0faff;
  19. border-radius: 5px;
  20. -webkit-border-radius: 5px;
  21. -moz-border-radius: 5px;
  22. box-shadow: 0 1px 1px #0096ff;
  23. -webkit-box-shadow: 0 1px 1px #0096ff;
  24. -moz-box-shadow: 0 1px 1px #0096ff;
  25. }
  26. a.snow:hover {
  27. background: #fff;
  28. }
  29. a.snow.ball {
  30. font-size: 1.5em;
  31. height: 50px;
  32. width: 50px;
  33. line-height: 50px;
  34. padding: 5px 5px;
  35. text-align: center;
  36. border-radius: 50px;
  37. -webkit-border-radius: 50px;
  38. -moz-border-radius: 50px;
  39. }
  40. a.snow:active {
  41. position: relative;
  42. top: 1px;
  43. }

Report this snippet  

You need to login to post a comment.