advanced code snippet search

Posted By

ichnoweb on 04/11/11


Tagged

button


Versions (?)

Red Pill 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>Press Me!</p>
  4. </div>
  5. /* End HTML */
  6.  
  7. <="" p="">
  8.  
  9. .button {
  10.  
  11. 	/*basic styles*/
  12. 	width: 250px;  height: 50px;  color: white; background-color: #d46d45;
  13. 	text-align: center;  font-size: 30px;  line-height: 50px;
  14.  
  15.  
  16. 	/*gradient styles*/
  17. 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d46d45), to(#b1432a));
  18. 	background: -moz-linear-gradient(19% 75% 90deg,#b1432a, #d46d45);
  19.  
  20. 	/*border styles*/
  21. 	border-top: solid 2px #e28d79;
  22. 	border-bottom: solid 1px #51281f;
  23. 	border-right: solid 1px #d46d45;
  24. 	border-left: solid 1px #d46d45;
  25. 	-moz-border-radius: 30px;
  26. 	-webkit-border-radius: 30px;
  27. 	border-radius: 30px;
  28.  
  29. }
  30.  
  31.  
  32. .button p {
  33. 	font-size: 25px;
  34. 	line-height: 50px;
  35. 	font-family: 'Trebuchet MS', sans-serif;
  36. }
  37.  
  38. a {
  39. 	text-decoration: none;
  40. 	color: fff;
  41. }
  42.  
  43. .button:hover {
  44. 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1432a), to(#d46d45));
  45. 	background: -moz-linear-gradient(19% 75% 90deg,#d46d45, #b1432a);
  46. 	border-top: solid 2px #b1432a;
  47. 	border-bottom: solid 1px #e28d79;
  48. }

Report this snippet  

You need to login to post a comment.