Follow me on Twitter | Visit my Website

CSS3 Button


CSS3 Button


CSS3 Button


CSS3 Button

HTML


    <a href="/" class="btn green btnshadow"> CSS3 Button </a>

    <a href="/" class="btn red" > CSS3 Button </a>

    <a href="/" class="btn darkgrey txtshadow-grey"> CSS3 Button </a>

    <a href="/" class="btn lightgrey txtshadow-white"> CSS3 Button </a>

CSS

  
    .btn {
      display: inline-block;
      outline: none;
      cursor: pointer;
      font-size: 20px;
      font-weight:bold;
      text-align: center;
      text-decoration: none;
      padding: .31em 2em .35em;
      -webkit-border-radius: .35em;
      -moz-border-radius: .35em;      
      border-radius: .35em;
      }

    .btn:hover {
      text-decoration: none;
      }
      
    .btn:active {
      position: relative;
      top: 1px;
      }

    .btnshadow {
      -moz-box-shadow: 0px 1px 4px 0px #8FA7B6, 0px 2px 10px 0 #b0c1cb; 
      -webkit-box-shadow: 0px 1px 4px 0px #8FA7B6, 0px 2px 10px 0 #b0c1cb; 
      box-shadow: 0px 1px 4px 0px #8FA7B6, 0px 2px 10px 0 #b0c1cb; 
      }

    .txtshadow-white {
      text-shadow: 1px 1px 1px #ffffff;
      }

    .txtshadow-grey {
      text-shadow: -1px -1px 1px #688698;
      }

    .green {
      color: #ffffff;
      background: #1d5123;
      background: -webkit-gradient(linear, left top, left bottom, from(#2a7432), to(#1d5123));
      background: -moz-linear-gradient(top, #2a7432, #1d5123);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a7432', endColorstr='#1d5123');
      }

    .green:hover {
      background: #2a7432;
      background: -webkit-gradient(linear, left top, left bottom, from(#289537), to(#1d5123));
      background: -moz-linear-gradient(top, #289537, #1d5123);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#289537', endColorstr='#1d5123');
      }

    .green:active {
      background: #2a7432;
      background: -webkit-gradient(linear, left top, left bottom, from(#289537), to(#1d5123));
      background: -moz-linear-gradient(top, #289537, #1d5123);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#289537', endColorstr='#1d5123');
      }

    .red {
      color: #ffffff;
      background: #9f1017;
      background: -webkit-gradient(linear, left top, left bottom, from(#f64448), to(#9f1017));
      background: -moz-linear-gradient(top, #f64448, #9f1017);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f64448', endColorstr='#9f1017');
      }

    .red:hover {
      background: #f66b6e;
      background: -webkit-gradient(linear, left top, left bottom, from(#f66b6e), to(#9f1017));
      background: -moz-linear-gradient(top, #f66b6e, #9f1017);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f66b6e', endColorstr='#9f1017');
      }

    .red:active {
      background: #f66b6e;
      background: -webkit-gradient(linear, left top, left bottom, from(#f66b6e), to(#9f1017));
      background: -moz-linear-gradient(top, #f66b6e, #9f1017);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f66b6e', endColorstr='#9f1017');
      }

    .darkgrey {
      color: #ffffff;
      background: #005ca8;
      background: -webkit-gradient(linear, left top, left bottom, from(#90a8b6), to(#698ca1));
      background: -moz-linear-gradient(top, #90a8b6, #698ca1);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#90a8b6', endColorstr='#698ca1');
      }

    .darkgrey:hover {
      background: #849fae;
      background: -webkit-gradient(linear, left top, left bottom, from(#b1c6d1), to(#698ca0));
      background: -moz-linear-gradient(top, #b1c6d1, #698ca0);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b1c6d1', endColorstr='#698ca0');
      }

    .darkgrey:active {
      background: #849fae;
      background: -webkit-gradient(linear, left top, left bottom, from(#b1c6d1), to(#698ca0));
      background: -moz-linear-gradient(top, #b1c6d1, #698ca0);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b1c6d1', endColorstr='#698ca0');
      }

    .lightgrey {
      color: #99a6ae;
      background: #cfd8dd;
      background: -webkit-gradient(linear, left top, left bottom, from(#e1e8ec), to(#c0cbd1));
      background: -moz-linear-gradient(top, #e1e8ec, #c0cbd1);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e8ec', endColorstr='#c0cbd1');
      }

    .lightgrey:hover {
      background: #cfd8dd;
      background: -webkit-gradient(linear, left top, left bottom, from(#e1e8ec), to(#c0cbd1));
      background: -moz-linear-gradient(top, #e1e8ec, #c0cbd1);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e8ec', endColorstr='#c0cbd1');
      }

    .lightgrey:active {
      background: #cfd8dd;
      background: -webkit-gradient(linear, left top, left bottom, from(#e1e8ec), to(#c0cbd1));
      background: -moz-linear-gradient(top, #e1e8ec, #c0cbd1);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e8ec', endColorstr='#c0cbd1');
      }