2014-03-03 7:34 PM

Super Sexy CSS3 Buttons

Author: Animorph

Posted: 2017-09-24

3 Comments

Code
<!Doctype html>
<html>
<head>
<style>
#body { padding: 10px; }
   
a {
  font-family: "Helvetica", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 8px 19px;
}
  a:before, a:after {
  height: 29px;
  width: 1px;
  content: '';
  position: absolute;
  margin-top: -5px;
  }
  a:before { margin-right: 19px; }
  a:after { margin-left: 19px; }
  @-moz-document url-prefix() { a:before { margin-left: -20px; } }
  a:active:before, a:active:after { display: none; }
   
   
   
.white {
  color: #4A4A4A;
  text-shadow: 0 1px 0 white;
  background-color: #F1F1F1;
  background-image: -moz-linear-gradient(100% 100% 90deg, #E0E0E0, #F6F6F6);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F6F6), to(#E0E0E0));
  border: 1px solid #B2B2B2;
  border-top: 1px solid #C9C9C9;
  border-bottom: 1px solid #8F8F8F;
  -webkit-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
  -moz-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
  box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
}
  .white:after {
  background-image: -moz-linear-gradient(100% 100% 90deg, #8F8F8F, #C9C9C9);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9C9C9), to(#8F8F8F));
  }
  .white:before {
  background-image: -moz-linear-gradient(100% 100% 90deg, #8F8F8F, #C9C9C9);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9C9C9), to(#8F8F8F));
  }
  .white:hover {
  -webkit-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 9px rgba(0,0,0,0.3), inset 0 0 2px 1px rgba(255,255,255,0.9);
  -moz-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 9px rgba(0,0,0,0.3), inset 0 0 2px 1px rgba(255,255,255,0.9);
  box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 9px rgba(0,0,0,0.3), inset 0 0 2px 1px rgba(255,255,255,0.9);
  color: black;
  }
  .white:active {
  -webkit-box-shadow: 0 1px 0 #BBBBBB, 0 2px 0 #B0B0B0, 0 3px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
  -moz-box-shadow: 0 1px 0 #BBBBBB, 0 2px 0 #B0B0B0, 0 3px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
  box-shadow: 0 1px 0 #BBBBBB, 0 2px 0 #B0B0B0, 0 3px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
  position: relative;
  top: 2px;
  }
  .white.pressin:active {
  background-image: -moz-linear-gradient(100% 100% 90deg, #F6F6F6, #E0E0E0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E0E0E0), to(#F6F6F6));
  }
   
   
   
.red {
  color: #510000;
  text-shadow: 0 1px 0 #F77C86;
  background-color: #F55463;
  background-image: -moz-linear-gradient(100% 100% 90deg, #F03C4C, #F96775);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F96775), to(#F03C4C));
  border: 1px solid #CA3844;
  border-top: 1px solid #E27B84;
  border-bottom: 1px solid #B80018;
  -webkit-box-shadow: 0 1px 0 #D82E3F, 0 2px 0 #D22C3D, 0 3px 0 #C82738, 0 4px 0 #B12534, 0 5px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: 0 1px 0 #D82E3F, 0 2px 0 #D22C3D, 0 3px 0 #C82738, 0 4px 0 #B12534, 0 5px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: 0 1px 0 1px 0 #D82E3F, 0 2px 0 #D22C3D, 0 3px 0 #C82738, 0 4px 0 #B12534, 0 5px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.3);
}
  .red:after {
  background-image: -moz-linear-gradient(100% 100% 90deg, #B80018, #E27B84);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E27B84), to(#B80018));
  }
  .red:before {
  background-image: -moz-linear-gradient(100% 100% 90deg, #B80018, #E27B84);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E27B84), to(#B80018));
  }
  .red:hover {
  -webkit-box-shadow: 0 1px 0 #D82E3F, 0 2px 0 #D22C3D, 0 3px 0 #C82738, 0 4px 0 #B12534, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: 0 1px 0 #D82E3F, 0 2px 0 #D22C3D, 0 3px 0 #C82738, 0 4px 0 #B12534, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: 0 1px 0 #D82E3F, 0 2px 0 #D22C3D, 0 3px 0 #C82738, 0 4px 0 #B12534, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.3);
  color: black;
  }
  .red:active {
  -webkit-box-shadow: 0 1px 0 #C82738, 0 2px 0 #B12534, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: 0 1px 0 #C82738, 0 2px 0 #B12534, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: 0 1px 0 #C82738, 0 2px 0 #B12534, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.3);
  position: relative;
  top: 2px;
  }
  .red.pressin:active {
  background-image: -moz-linear-gradient(100% 100% 90deg, #F96775, #F03C4C);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F03C4C), to(#F96775));
  }
   
   
   
.yellow {
  color: #563d00;
  text-shadow: 0 1px 0 #F8EEA8;
  background-color: #F5E27D;
  background-image: -moz-linear-gradient(100% 100% 90deg, #F3DA69, #F6E991);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6E991), to(#F3DA69));
  border: 1px solid #D7BA3B;
  border-top: 1px solid #EBCF50;
  border-bottom: 1px solid #C39525;
  -webkit-box-shadow: 0 1px 0 #CEB643, 0 2px 0 #C8B045, 0 3px 0 #C3AA47, 0 4px 0 #B29146, 0 5px 5px rgba(0,0,0,0.3), inset 0 0 2px 1px rgba(255,255,255,0.6);
  -moz-box-shadow: 0 1px 0 #CEB643, 0 2px 0 #C8B045, 0 3px 0 #C3AA47, 0 4px 0 #B29146, 0 5px 5px rgba(0,0,0,0.3), inset 0 0 2px 1px rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 #CEB643, 0 2px 0 #C8B045, 0 3px 0 #C3AA47, 0 4px 0 #B29146, 0 5px 5px rgba(0,0,0,0.3), inset 0 0 2px 1px rgba(255,255,255,0.6);
}
  .yellow:after {
  background-image: -moz-linear-gradient(100% 100% 90deg, #C39525, #EBCF50);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBCF50), to(#C39525));
  }
  .yellow:before {
  background-image: -moz-linear-gradient(100% 100% 90deg, #C39525, #EBCF50);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBCF50), to(#C39525));
  }
  .yellow:hover {
  -webkit-box-shadow: 0 1px 0 #CEB643, 0 2px 0 #C8B045, 0 3px 0 #C3AA47, 0 4px 0 #B29146, 0 5px 9px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.6);
  -moz-box-shadow: 0 1px 0 #CEB643, 0 2px 0 #C8B045, 0 3px 0 #C3AA47, 0 4px 0 #B29146, 0 5px 9px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 #CEB643, 0 2px 0 #C8B045, 0 3px 0 #C3AA47, 0 4px 0 #B29146, 0 5px 9px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.6);
  color: black;
  }
  .yellow:active {
  -webkit-box-shadow: 0 1px 0 #C3AA47, 0 2px 0 #B29146, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.6);
  -moz-box-shadow: 0 1px 0 #C3AA47, 0 2px 0 #B29146, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 #C3AA47, 0 2px 0 #B29146, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.6);
  position: relative;
  top: 2px;
  }
  .yellow.pressin:active {
  background-image: -moz-linear-gradient(100% 100% 90deg, #F6E991, #F3DA69);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3DA69), to(#F6E991));
  }
   
   
   
.green {
  color: #013e16;
  text-shadow: 0 1px 0 #B6E37B;
  background-color: #AADD65;
  background-image: -moz-linear-gradient(100% 100% 90deg, #91D254, #BDE477);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BDE477), to(#91D254));
  border: 1px solid #64B33A;
  border-top: 1px solid #A3CF62;
  border-bottom: 1px solid #40801C;
  -webkit-box-shadow: 0 1px 0 #7EB33E, 0 2px 0 #7BAF3C, 0 3px 0 #72A635, 0 4px 0 #446C20, 0 5px 5px rgba(0,0,0,0.35), inset 0 0 2px 1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 0 #7EB33E, 0 2px 0 #7BAF3C, 0 3px 0 #72A635, 0 4px 0 #446C20, 0 5px 5px rgba(0,0,0,0.35), inset 0 0 2px 1px rgba(255,255,255,0.5);
  box-shadow: 0 1px 0 #7EB33E, 0 2px 0 #7BAF3C, 0 3px 0 #72A635, 0 4px 0 #446C20, 0 5px 5px rgba(0,0,0,0.35), inset 0 0 2px 1px rgba(255,255,255,0.5);
}
  .green:after {
  background-image: -moz-linear-gradient(100% 100% 90deg, #40801C, #A3CF62);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A3CF62), to(#40801C));
  }
  .green:before {
  background-image: -moz-linear-gradient(100% 100% 90deg, #40801C, #A3CF62);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A3CF62), to(#40801C));
  }
  .green:hover {
  -webkit-box-shadow: 0 1px 0 #7EB33E, 0 2px 0 #7BAF3C, 0 3px 0 #72A635, 0 4px 0 #446C20, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 0 #7EB33E, 0 2px 0 #7BAF3C, 0 3px 0 #72A635, 0 4px 0 #446C20, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.5);
  box-shadow: 0 1px 0 #7EB33E, 0 2px 0 #7BAF3C, 0 3px 0 #72A635, 0 4px 0 #446C20, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.5);
  color: black;
  }
  .green:active {
  -webkit-box-shadow: 0 1px 0 #72A635, 0 2px 0 #446C20, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 0 #72A635, 0 2px 0 #446C20, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.5);
  box-shadow: 0 1px 0 #72A635, 0 2px 0 #446C20, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.5);
  position: relative;
  top: 2px;
  }
  .green.pressin:active {
  background-image: -moz-linear-gradient(100% 100% 90deg, #BDE477, #91D254);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#91D254), to(#BDE477));
  }
   
   
   
.cyan {
  color: #0F003D;
  text-shadow: 0 1px 0 #80D3E4;
  background-color: #5CC8DB;
  background-image: -moz-linear-gradient(100% 100% 90deg, #49AECF, #63D2E0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63D2E0), to(#49AECF));
  border: 1px solid #3285B6;
  border-top: 1px solid #5BC1D2;
  border-bottom: 1px solid #10597D;
  -webkit-box-shadow: 0 1px 0 #3399B0, 0 2px 0 #2D91A7, 0 3px 0 #24889F, 0 4px 0 #1A586D, 0 5px 5px rgba(0,0,0,0.35), inset 0 0 2px 1px rgba(255,255,255,0.35);
  -moz-box-shadow: 0 1px 0 #3399B0, 0 2px 0 #2D91A7, 0 3px 0 #24889F, 0 4px 0 #1A586D, 0 5px 5px rgba(0,0,0,0.35), inset 0 0 2px 1px rgba(255,255,255,0.35);
  box-shadow: 0 1px 0 #3399B0, 0 2px 0 #2D91A7, 0 3px 0 #24889F, 0 4px 0 #1A586D, 0 5px 5px rgba(0,0,0,0.35), inset 0 0 2px 1px rgba(255,255,255,0.35);
}
  .cyan:after {
  background-image: -moz-linear-gradient(100% 100% 90deg, #10597D, #5BC1D2);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5BC1D2), to(#10597D));
  }
  .cyan:before {
  background-image: -moz-linear-gradient(100% 100% 90deg, #10597D, #5BC1D2);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5BC1D2), to(#10597D));
  }
  .cyan:hover {
  -webkit-box-shadow: 0 1px 0 #3399B0, 0 2px 0 #2D91A7, 0 3px 0 #24889F, 0 4px 0 #1A586D, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.35);
  -moz-box-shadow: 0 1px 0 #3399B0, 0 2px 0 #2D91A7, 0 3px 0 #24889F, 0 4px 0 #1A586D, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.35);
  box-shadow: 0 1px 0 #3399B0, 0 2px 0 #2D91A7, 0 3px 0 #24889F, 0 4px 0 #1A586D, 0 5px 9px rgba(0,0,0,0.45), inset 0 0 2px 1px rgba(255,255,255,0.35);
  color: black;
  }
  .cyan:active {
  -webkit-box-shadow: 0 1px 0 #24889F, 0 2px 0 #1A586D, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.35);
  -moz-box-shadow: 0 1px 0 #24889F, 0 2px 0 #1A586D, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.35);
  box-shadow: 0 1px 0 #24889F, 0 2px 0 #1A586D, 0 3px 5px rgba(0,0,0,0.4), inset 0 0 2px 1px rgba(255,255,255,0.35);
  position: relative;
  top: 2px;
  }
  .cyan.pressin:active {
  background-image: -moz-linear-gradient(100% 100% 90deg, #63D2E0, #49AECF);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#49AECF), to(#63D2E0));
  }
</style>
</head>
<body>
<div id="body">
   
  <a href="#" class="white">Download</a>
  



  <a href="#" class="white">Hover and Active states</a>
  



  <a href="#" class="white pressin">Try clicking me! I have the 'pressin' state.</a>
   
  





   
  <a href="#" class="white">White - Lorem ipsum dolor.</a>
  



  <a href="#" class="red">Red - Morbi malesuada nulla.</a>
  



  <a href="#" class="yellow">Yellow - Donec semper quam.</a>
  



  <a href="#" class="green">Green - Mauris iaculis porttitor.</a>
  



  <a href="#" class="cyan">Cyan - Nunc eu ullamcorper.</a>
   
</div>
</body>
</html>

30
Comments
Total comments: 3
  • # Animorph Tuesday, 7:25 PM
    test
  • # Animorph Tuesday, 6:32 PM
    ewergr
  • # Animorph Tuesday, 6:31 PM
    gggwggerregrge
"Making uCoz web designs simple and easy to use"
- uCause Developers