advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.