advanced code snippet search

Posted By

ichnoweb on 04/11/11


Tagged

button


Versions (?)

Blue Pill with Icon Button

 / Published in: CSS
 

URL: http://designshack.co.uk/articles/css/6-useful-css-button-recipes-you-can-copy-paste

Expand | Embed | Plain Text 
  1. /* HTML */
  2. <div class="button">
  3.     <p>Write to Us &#x270E; </p>
  4. </div>
  5. /* End HTML */
  6.  
  7. <="" p="">
  8.  
  9. .button {
  10.  
  11. 	/*basic styles*/
  12. 	width: 250px;  height: 50px;  color: #fff; background-color: #125182;
  13. 	text-align: center;  font-size: 30px;  line-height: 50px;
  14.  
  15.  
  16. 	/*gradient styles*/
  17. 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #125182), color-stop(.5, #1269ab), color-stop(.51, #004375), to(#00345b));
  18. 	background: -moz-linear-gradient(top, #125182, #1269ab 50%, #004375 51%, #00345b);  
  19.  
  20. 	/*border styles*/
  21. 	-moz-border-radius: 30px;
  22. 	-webkit-border-radius: 30px;
  23. 	border-radius: 30px;
  24.  
  25. 	-moz-box-shadow:inset 0 0 10px #000000;
  26. 	-webkit-box-shadow:inset 0 0 10px #000000;
  27. 	box-shadow:inset 0 0 10px #000000;
  28. }
  29.  
  30.  
  31. .button p {
  32. 	font-size: 30px;
  33. 	line-height: 50px;
  34. 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  35. 	font-weight: 300;
  36. 	text-shadow: 0px 0px 3px #555;
  37.  
  38. }
  39.  
  40. a {
  41. 	text-decoration: none;
  42. 	color: fff;
  43. }
  44.  
  45. .button:hover {
  46. 	-moz-box-shadow:inset 0 0 50px #000000;
  47. 	-webkit-box-shadow:inset 0 0 50px #000000;
  48. 	box-shadow:inset 0 0 50px #000000;
  49. }
  50.  
  51. .button p:hover {
  52. 	text-shadow: 0px 0px 3px #888;
  53. }

Report this snippet  

You need to login to post a comment.