advanced code snippet search

Posted By

ichnoweb on 04/11/11


Tagged

button


Versions (?)

Rounded Button

 / Published in: CSS
 

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

A two line, css-styled button.

Expand | Embed | Plain Text 
  1. /* HTML */
  2. <div class="button">
  3. 	<h3>Sign Up Now Free!</h3>
  4. 	<p>30 day risk free trial.</p>
  5. </div>
  6. /* End HTML */
  7.  
  8. <="" p="">
  9.  
  10. .button {
  11.  
  12. 	/*basic styles*/
  13. 	width: 250px;  height: 50px;  color: white; background-color: #99CF00;
  14. 	text-align: center;  font-size: 30px;  line-height: 50px;
  15.  
  16.  
  17. 	/*gradient styles*/
  18. 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700));
  19. 	background: -moz-linear-gradient(19% 75% 90deg,#6DB700, #99CF00);
  20.  
  21. 	/*border styles*/
  22. 	border-left: solid 1px #c3f83a;
  23. 	border-top: solid 1px #c3f83a;
  24. 	border-right: solid 1px #82a528;
  25. 	border-bottom: solid 1px #58701b;
  26. 	-moz-border-radius: 10px;
  27. 	-webkit-border-radius: 10px;
  28. 	border-radius: 10px;
  29. 	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700))
  30.  
  31. }
  32.  
  33. .button h3 {
  34. 	font-size: 20px;
  35. 	line-height: 35px;
  36. 	font-family: helvetica, sans-serif;
  37. }
  38.  
  39. .button p {
  40. 	font-size: 12px;
  41. 	line-height: 4px;
  42. 	font-family: helvetica, sans-serif;
  43. }
  44.  
  45. a {
  46. 	text-decoration: none;
  47. 	color: fff;
  48. }
  49.  
  50. .button:hover {
  51. 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6DB700), to(#99CF00));
  52. 	background: -moz-linear-gradient(19% 75% 90deg,#99CF00, #6DB700);
  53. }

Report this snippet  

You need to login to post a comment.