Advanced Search

Pure CSS3 Buttons

/ Published in: CSS
Save to your folder(s)
Pure CSS3 buttons with 9 pre-defined colours and 3 styles.
Adapted from Web Designer Wall - http://www.webdesignerwall.com/demo/css-buttons.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .button{cursor:pointer;display:inline-block;font:14px/100% Arial,Helvetica,sans-serif;outline:none;padding:.5em 2em .55em;text-align:center;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);}
  2. .button:hover{text-decoration:none;}
  3. .button:active{position:relative;top:1px;}
  4.  
  5. .bigrounded{-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}
  6. .medium{font-size:12px;padding:.4em 1.5em .42em;}
  7. .small{font-size:11px;padding:.2em 1em .275em;}
  8.  
  9. .black{background:#333;background:-webkit-gradient(linear,left top,left bottom,from(#666),to(#000));background:-moz-linear-gradient(top,#666,#000);border:solid 1px #333;color:#d7d7d7;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');}
  10. .black:hover{background:#000;background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#000));background:-moz-linear-gradient(top,#444,#000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');}
  11. .black:active{background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#444));background:-moz-linear-gradient(top,#000,#444);color:#666;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666');}
  12.  
  13. .blue{background:#0095cd;background:-webkit-gradient(linear,left top,left bottom,from(#00adee),to(#0078a5));background:-moz-linear-gradient(top,#00adee,#0078a5);border:solid 1px #0076a3;color:#d9eef7;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');}
  14. .blue:hover{background:#007ead;background:-webkit-gradient(linear,left top,left bottom,from(#0095cc),to(#00678e));background:-moz-linear-gradient(top,#0095cc,#00678e);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e');}
  15. .blue:active{background:-webkit-gradient(linear,left top,left bottom,from(#0078a5),to(#00adee));background:-moz-linear-gradient(top,#0078a5,#00adee);color:#80bed6;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');}
  16.  
  17. .gray{background:#6e6e6e;background:-webkit-gradient(linear,left top,left bottom,from(#888),to(#575757));background:-moz-linear-gradient(top,#888,#575757);border:solid 1px #555;color:#e9e9e9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757');}
  18. .gray:hover{background:#616161;background:-webkit-gradient(linear,left top,left bottom,from(#757575),to(#4b4b4b));background:-moz-linear-gradient(top,#757575,#4b4b4b);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b');}
  19. .gray:active{background:-webkit-gradient(linear,left top,left bottom,from(#575757),to(#888));background:-moz-linear-gradient(top,#575757,#888);color:#afafaf;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888');}
  20.  
  21. .green{background:#64991e;background:-webkit-gradient(linear,left top,left bottom,from(#7db72f),to(#4e7d0e));background:-moz-linear-gradient(top,#7db72f,#4e7d0e);border:solid 1px #538312;color:#e8f0de;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');}
  22. .green:hover{background:#538018;background:-webkit-gradient(linear,left top,left bottom,from(#6b9d28),to(#436b0c));background:-moz-linear-gradient(top,#6b9d28,#436b0c);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');}
  23. .green:active{background:-webkit-gradient(linear,left top,left bottom,from(#4e7d0e),to(#7db72f));background:-moz-linear-gradient(top,#4e7d0e,#7db72f);color:#a9c08c;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');}
  24.  
  25. .orange{background:#f78d1d;background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));background:-moz-linear-gradient(top,#faa51a,#f47a20);border:solid 1px #da7c0c;color:#fef4e9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');}
  26. .orange:hover{background:#f47c20;background:-webkit-gradient(linear,left top,left bottom,from(#f88e11),to(#f06015));background:-moz-linear-gradient(top,#f88e11,#f06015);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');}
  27. .orange:active{background:-webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));background:-moz-linear-gradient(top,#f47a20,#faa51a);color:#fcd3a5;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');}
  28.  
  29. .pink{background:#f895c2;background:-webkit-gradient(linear,left top,left bottom,from(#feb1d3),to(#f171ab));background:-moz-linear-gradient(top,#feb1d3,#f171ab);border:solid 1px #d2729e;color:#feeef5;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');}
  30. .pink:hover{background:#d57ea5;background:-webkit-gradient(linear,left top,left bottom,from(#f4aacb),to(#e86ca4));background:-moz-linear-gradient(top,#f4aacb,#e86ca4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4');}
  31. .pink:active{background:-webkit-gradient(linear,left top,left bottom,from(#f171ab),to(#feb1d3));background:-moz-linear-gradient(top,#f171ab,#feb1d3);color:#f3c3d9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3');}
  32.  
  33. .red{background:#d81b21;background:-webkit-gradient(linear,left top,left bottom,from(#ed1c24),to(#aa1317));background:-moz-linear-gradient(top,#ed1c24,#aa1317);border:solid 1px #980c10;color:#faddde;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');}
  34. .red:hover{background:#b61318;background:-webkit-gradient(linear,left top,left bottom,from(#c9151b),to(#a11115));background:-moz-linear-gradient(top,#c9151b,#a11115);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');}
  35. .red:active{background:-webkit-gradient(linear,left top,left bottom,from(#aa1317),to(#ed1c24));background:-moz-linear-gradient(top,#aa1317,#ed1c24);color:#de898c;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');}
  36.  
  37. .rosy{background:#da5867;background:-webkit-gradient(linear,left top,left bottom,from(#f16c7c),to(#bf404f));background:-moz-linear-gradient(top,#f16c7c,#bf404f);border:solid 1px #b73948;color:#fae7e9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');}
  38. .rosy:hover{background:#ba4b58;background:-webkit-gradient(linear,left top,left bottom,from(#cf5d6a),to(#a53845));background:-moz-linear-gradient(top,#cf5d6a,#a53845);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845');}
  39. .rosy:active{background:-webkit-gradient(linear,left top,left bottom,from(#bf404f),to(#f16c7c));background:-moz-linear-gradient(top,#bf404f,#f16c7c);color:#dca4ab;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c');}
  40.  
  41. .white{background:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ededed));background:-moz-linear-gradient(top,#fff,#ededed);border:solid 1px #b7b7b7;color:#606060;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');}
  42. .white:hover{background:#ededed;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#dcdcdc));background:-moz-linear-gradient(top,#fff,#dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc');}
  43. .white:active{background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#fff));background:-moz-linear-gradient(top,#ededed,#fff);color:#999;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');}

URL: http://darrenhuskie.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.