Push Button Color Options with html and css



A push button is a simple switch that allows control over an action within a machine. The majority of push buttons manufactured comprise of high-quality plastics or metals. Push buttons can also come in a variety of shapes including; concaved to conform to fingers, convexed to fit your hand shape and flat buttons. Push buttons vary in shape, colour, size and features depending on the use case. Push buttons come in either normally open or normally closed types.




<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Multi-colored Push Buttons</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <div class="container">
    <div class="column red">
      <a href="#" class="button red">Push</a>
      <a href="#" class="button red alt">Push</a>
    </div>

    <div class="column blue">
      <a href="#" class="button blue">Push</a>
      <a href="#" class="button blue alt">Push</a>
    </div>

    <div class="column green">
      <a href="#" class="button green">Push</a>
      <a href="#" class="button green alt">Push</a>
    </div>

    <div class="column cyan">
      <a href="#" class="button cyan">Push</a>
      <a href="#" class="button cyan alt">Push</a>
    </div>

    <div class="column brown">
      <a href="#" class="button brown">Push</a>
      <a href="#" class="button brown alt">Push</a>
    </div>

    <div class="column pink">
      <a href="#" class="button pink">Push</a>
      <a href="#" class="button pink alt">Push</a>
    </div>

    <div class="column purple">
      <a href="#" class="button purple">Push</a>
      <a href="#" class="button purple alt">Push</a>
    </div>

    <div class="column gray">
      <a href="#" class="button gray">Push</a>
      <a href="#" class="button gray alt">Push</a>
    </div>
  </div>
</body>
</html>
                    
                  
                



 
@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";

body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #f8f6f6;
}

.container {
  zoom: 1;
}

.container:before, .container:after {
  content: '';
  display: table;
}

.container:after {
  clear: both;
}

.column {
  position: relative;
  z-index: 1;
  float: left;
  width: 25%;
  padding: 30px 0;
  text-align: center;
  white-space: nowrap;
}

.column .button + .button {
  margin-left: 20px;
}

@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 400px) {
  .column {
    width: 100%;
  }
}

.button {
  display: inline-block;
  position: relative;
  height: 33px;
  line-height: 33px;
  padding: 0 15px;
  font-size: 15px;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 2px solid;
  border-radius: 7px;
  outline: 0;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
}

.button:before, .button:after {
  content: '';
  position: absolute;
}

.button:before {
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  z-index: -1;
  border-radius: 9px;
}

.button:after {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 7px;
}

.button.alt {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.button.alt:before {
  display: none;
}

.column.red {
  background: #d04022;
}

.button.red {
  background: #d02e17;
  border-color: #942110 #902010 #741a0d;
  background-image: -webkit-linear-gradient(top, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
  background-image: -moz-linear-gradient(top, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
  background-image: -o-linear-gradient(top, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
  background-image: linear-gradient(to bottom, #e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
}

.button.red:before {
  background: #ee442c;
  background-image: -webkit-linear-gradient(top, #b32511, #f3533c);
  background-image: -moz-linear-gradient(top, #b32511, #f3533c);
  background-image: -o-linear-gradient(top, #b32511, #f3533c);
  background-image: linear-gradient(to bottom, #b32511, #f3533c);
}

.button.red:active {
  background: #e63b1b;
  background-image: -webkit-linear-gradient(top, #a9110b 0%, #de3819 60%, #e63b1b 100%);
  background-image: -moz-linear-gradient(top, #a9110b 0%, #de3819 60%, #e63b1b 100%);
  background-image: -o-linear-gradient(top, #a9110b 0%, #de3819 60%, #e63b1b 100%);
  background-image: linear-gradient(to bottom, #a9110b 0%, #de3819 60%, #e63b1b 100%);
}

.button.red:active:after {
  border-color: #e63b1b;
}

.column.blue {
  background: #4071b6;
}

.button.blue {
  background: #3471b8;
  border-color: #255184 #244f80 #1e4068;
  background-image: -webkit-linear-gradient(top, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
  background-image: -moz-linear-gradient(top, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
  background-image: -o-linear-gradient(top, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
  background-image: linear-gradient(to bottom, #497fcc 0%, #3d72c8 50%, #3471b8 50%, #2365a0 100%);
}

.button.blue:before {
  background: #4c8ad3;
  background-image: -webkit-linear-gradient(top, #29609f, #5995da);
  background-image: -moz-linear-gradient(top, #29609f, #5995da);
  background-image: -o-linear-gradient(top, #29609f, #5995da);
  background-image: linear-gradient(to bottom, #29609f, #5995da);
}

.button.blue:active {
  background: #3d79c8;
  background-image: -webkit-linear-gradient(top, #216298 0%, #3774c4 60%, #3d79c8 100%);
  background-image: -moz-linear-gradient(top, #216298 0%, #3774c4 60%, #3d79c8 100%);
  background-image: -o-linear-gradient(top, #216298 0%, #3774c4 60%, #3d79c8 100%);
  background-image: linear-gradient(to bottom, #216298 0%, #3774c4 60%, #3d79c8 100%);
}

.button.blue:active:after {
  border-color: #3d79c8;
}

.column.green {
  background: #429538;
}

.button.green {
  background: #3e952d;
  border-color: #29621e #275e1c #1d4715;
  background-image: -webkit-linear-gradient(top, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
  background-image: -moz-linear-gradient(top, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
  background-image: -o-linear-gradient(top, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
  background-image: linear-gradient(to bottom, #45b436 0%, #3ca933 50%, #3e952d 50%, #337c1d 100%);
}

.button.green:before {
  background: #4ac233;
  background-image: -webkit-linear-gradient(top, #317c22, #52d039);
  background-image: -moz-linear-gradient(top, #317c22, #52d039);
  background-image: -o-linear-gradient(top, #317c22, #52d039);
  background-image: linear-gradient(to bottom, #317c22, #52d039);
}

.button.green:active {
  background: #42a933;
  background-image: -webkit-linear-gradient(top, #31741b 0%, #3fa131 60%, #42a933 100%);
  background-image: -moz-linear-gradient(top, #31741b 0%, #3fa131 60%, #42a933 100%);
  background-image: -o-linear-gradient(top, #31741b 0%, #3fa131 60%, #42a933 100%);
  background-image: linear-gradient(to bottom, #31741b 0%, #3fa131 60%, #42a933 100%);
}

.button.green:active:after {
  border-color: #42a933;
}

.column.cyan {
  background: #39a4b2;
}

.button.cyan {
  background: #2eabb3;
  border-color: #20797e #1f757a #195d62;
  background-image: -webkit-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: -moz-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: -o-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: linear-gradient(to bottom, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
}

.button.cyan:before {
  background: #3fccd5;
  background-image: -webkit-linear-gradient(top, #249299, #4dd3dc);
  background-image: -moz-linear-gradient(top, #249299, #4dd3dc);
  background-image: -o-linear-gradient(top, #249299, #4dd3dc);
  background-image: linear-gradient(to bottom, #249299, #4dd3dc);
}

.button.cyan:active {
  background: #33b9c7;
  background-image: -webkit-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: -moz-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: -o-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: linear-gradient(to bottom, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
}

.button.cyan:active:after {
  border-color: #33b9c7;
}

.column.brown {
  background: #c5aa3b;
}

.button.brown {
  background: #c8a22e;
  border-color: #927622 #8e7321 #755f1b;
  background-image: -webkit-linear-gradient(top, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
  background-image: -moz-linear-gradient(top, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
  background-image: -o-linear-gradient(top, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
  background-image: linear-gradient(to bottom, #d5ba4a 0%, #d2ba3d 50%, #c8a22e 50%, #af821e 100%);
}

.button.brown:before {
  background: #dcb94d;
  background-image: -webkit-linear-gradient(top, #ae8c24, #e3c15b);
  background-image: -moz-linear-gradient(top, #ae8c24, #e3c15b);
  background-image: -o-linear-gradient(top, #ae8c24, #e3c15b);
  background-image: linear-gradient(to bottom, #ae8c24, #e3c15b);
}

.button.brown:active {
  background: #d2b33d;
  background-image: -webkit-linear-gradient(top, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
  background-image: -moz-linear-gradient(top, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
  background-image: -o-linear-gradient(top, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
  background-image: linear-gradient(to bottom, #a6791d 0%, #d0af35 60%, #d2b33d 100%);
}

.button.brown:active:after {
  border-color: #d2b33d;
}

.column.pink {
  background: #b53686;
}

.button.pink {
  background: #b62b89;
  border-color: #801e61 #7c1d5e #63184b;
  background-image: -webkit-linear-gradient(top, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
  background-image: -moz-linear-gradient(top, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
  background-image: -o-linear-gradient(top, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
  background-image: linear-gradient(to bottom, #d03998 0%, #cb308c 50%, #b62b89 50%, #9c1c7b 100%);
}

.button.pink:before {
  background: #d83ca6;
  background-image: -webkit-linear-gradient(top, #9c2174, #df4aae);
  background-image: -moz-linear-gradient(top, #9c2174, #df4aae);
  background-image: -o-linear-gradient(top, #9c2174, #df4aae);
  background-image: linear-gradient(to bottom, #9c2174, #df4aae);
}

.button.pink:active {
  background: #cb3093;
  background-image: -webkit-linear-gradient(top, #941a77 0%, #c22e8d 60%, #cb3093 100%);
  background-image: -moz-linear-gradient(top, #941a77 0%, #c22e8d 60%, #cb3093 100%);
  background-image: -o-linear-gradient(top, #941a77 0%, #c22e8d 60%, #cb3093 100%);
  background-image: linear-gradient(to bottom, #941a77 0%, #c22e8d 60%, #cb3093 100%);
}

.button.pink:active:after {
  border-color: #cb3093;
}

.column.purple {
  background: #7351b7;
}

.button.purple {
  background: #6440be;
  border-color: #4a2f8c #482e89 #3c2672;
  background-image: -webkit-linear-gradient(top, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
  background-image: -moz-linear-gradient(top, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
  background-image: -o-linear-gradient(top, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
  background-image: linear-gradient(to bottom, #825ec9 0%, #7d53c5 50%, #6440be 50%, #482da8 100%);
}

.button.purple:before {
  background: #8161d0;
  background-image: -webkit-linear-gradient(top, #5534a7, #8c6ed8);
  background-image: -moz-linear-gradient(top, #5534a7, #8c6ed8);
  background-image: -o-linear-gradient(top, #5534a7, #8c6ed8)