Metal Bootstrap Buttons

Create metal themed buttons for the Bootstrap front-end framework.

HTML

<a class="btn btn-lg btn-1">Gold Button</a>
<a class="btn btn-lg btn-2">Gold Button</a>
<a class="btn btn-lg btn-3">Gold Button</a>
<a class="btn btn-lg btn-4">Gold Button</a>
<a class="btn btn-lg btn-5">Silver Button</a>
<a class="btn btn-lg btn-6">Silver Button</a>
<a class="btn btn-lg btn-7">Silver Button</a>
<a class="btn btn-lg btn-8">Silver Button</a>
<a class="btn btn-lg btn-9">Rose Gold Button</a>
<a class="btn btn-lg btn-10">Rose Gold Button</a>
<a class="btn btn-lg btn-11">Rose Gold Button</a>
<a class="btn btn-lg btn-12">Rose Gold Button</a>
<a class="btn btn-lg btn-13">Black Button</a>
<a class="btn btn-lg btn-14">Black Button</a>
<a class="btn btn-lg btn-15">Black Button</a>
<a class="btn btn-lg btn-16">Black Button</a>
<a class="btn btn-lg btn-17">Cobalt Blue Button</a>
<a class="btn btn-lg btn-18">Cobalt Blue Button</a>
<a class="btn btn-lg btn-19">Cobalt Blue Button</a>
<a class="btn btn-lg btn-20">Cobalt Blue Button</a>

CSS

a.btn-1{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(180deg,#fea 0%,#dc8 49%,#a95 51%,#dc8 100%);
  border-radius: 5px;
}

a.btn-2{
  background: linear-gradient(top, #a95, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95);
  background: -webkit-linear-gradient(top, #a95, #fea 25%, #ffffff 38%, #dc8  63%, #fea 87%, #a95);
}

a.btn-3{
  background: -webkit-gradient(linear, left top, left bottom, from(#a95), to(#fea));
}

a.btn-4{
 background-image: -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) 3%, rgba(255, 238, 170, .1) 3.75%),
    -webkit-repeating-linear-gradient(left, rgba(170, 153, 85, 0) 0%, rgba(170, 153, 85, 0) 2%, rgba(170, 153, 85, .03) 2.25%),
    -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(255, 238, 170, .15) 1.2%),
    linear-gradient(180deg, #a95 0%, 
    #fea 47%, 
    #dc8 53%,
    #fea 100%);
}

a.btn-5{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #7c7c7c;
  background: #e6e6e6 linear-gradient(180deg,#e6e6e6 0%,rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%,rgba(0, 0, 0, 0.25) 100%);
  border-radius: 5px;
}

a.btn-6{
  border-color: #7c7c7c;
  background: #c5c5c5 linear-gradient(top, rgba(38, 38, 38, 0.8), #e6e6e6 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
  background: #e6e6e6 -webkit-linear-gradient(top, rgba(38, 38, 38, 0.5), #e6e6e6 25%, #ffffff 38%, rgba(0, 0, 0, 0.25)  63%, #e6e6e6 87%, rgba(38, 38, 38, 0.4));
}

a.btn-7{
  border-color: #7c7c7c;
  background: #e6e6e6 -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(#e6e6e6));
}

a.btn-8{
 border-color: #7c7c7c;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}

a.btn-9{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #D9A3A9;
  background: linear-gradient(180deg,#FFE6E9 0%,#DDA6AE 49%, #B76E79 51%,#DDA6AE 100%);
  border-radius: 5px;
}

a.btn-10{
  border-color: #D9A3A9;
  background: linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffffff 38%, #FFE6E9 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
  background: -webkit-linear-gradient(top,  #DDA6AE, #FFE6E9 25%, #ffefef 38%, #D9A3A9  63%, #FFE6E9 87%, #DDA6AE);
}

a.btn-11{
  border-color: #D9A3A9;
  background: -webkit-gradient(linear, left top, left bottom, from(#D9A3A9), to(#FFE6E9));
}

a.btn-12{
 border-color: #D9A3A9;
background-image: -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0)  3%, rgba(255, 230, 233,.1) 3.75%),
    -webkit-repeating-linear-gradient(left, rgba(183, 110, 121,0) 0%, rgba(183, 110, 121,0)   2%, rgba(183, 110, 121, .2) 2.25%),
    -webkit-repeating-linear-gradient(left, rgba(255, 230, 233,0) 0%, rgba(255, 230, 233,0) .6%, rgba(255, 230, 233,.3) 1.1%),
    
    linear-gradient(180deg, #D9A3A9  0%, 
    rgba(255, 230, 233,1) 47%, 
    #D9A3A9 53%,
    rgba(255, 230, 233,.7)100%);
}

a.btn-13{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #111;
  color: #555;
  background: linear-gradient(180deg,#555 0%,#222 49%, #000 51%,#222 100%);
  border-radius: 5px;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
}

a.btn-14{
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
  border-color: #111;
  color: #555;
  background: -webkit-linear-gradient(top,  #000, #222 15%, #333 28%, #000  63%, #2f2f2f 87%, #000);
}

a.btn-15{
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,0.3);
  border-color: #111;
  color: #555;
  text-shadow: -1px -1px 1px rgba(0,0,0,1);
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
}

a.btn-16{
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
 border-color: #111;
  color: #555;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,0%)  0%, 
    hsl(0,0%,10%) 47%, 
    hsl(0,0%,0%) 53%,
    hsl(0,0%,10%)100%);
}

a.btn-17{
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  border-color: #50beec;
  background: linear-gradient(180deg,#c6e7f2 0%,#50beec 49%, #0a71c8 51%,#0039a2 100%);
  border-radius: 5px;
}

a.btn-18{
  border-color: #D9A3A9;
  background: linear-gradient(top, #50beec, #c6e7f2 25%, #ffffff 38%, #c6e7f2 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8));
  background: -webkit-linear-gradient(top,  #50beec, #c6e7f2 25%, #c6e7f2 38%, #50beec  63%, #c6e7f2 87%, #50beec);
}

a.btn-19{
  border-color: #0a71c8;
  background: -webkit-gradient(linear, left top, left bottom, from(#0a71c8), to(#50beec));
}

a.btn-20{
 border-color: #50beec;
background-image: -webkit-repeating-linear-gradient(left, rgba(221, 239, 247,0) 0%, rgba(221, 239, 247,0)  3%, rgba(221, 239, 247,.1) 3.75%),
    -webkit-repeating-linear-gradient(left, rgba(0, 46, 110,0) 0%, rgba(0, 46, 110,0)   2%, rgba(0, 46, 110, .2) 2.25%),
    -webkit-repeating-linear-gradient(left, rgba(221, 239, 247,0) 0%, rgba(221, 239, 247,0) .6%, rgba(221, 239, 247,.3) 1.1%),
    linear-gradient(180deg, #50beec  0%, 
    rgba(221, 239, 247,1) 47%, 
    #50beec 53%,
    rgba(221, 239, 247,.7)100%);
}
Brandon Himpfen
Blogger. Developer. Designer. Programmer. Photographer. Traveller. Digital Marketer. Gamer.