CSS3 Buttons

Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID»

Go to Replace ID» Go to Replace ID» Go to Replace ID» Go to Replace ID»

 

 

Full Skrip HTML


<html>
  <head>
  <style type="text/css"> 
  .buttoncss3 {
  background: #222;
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  ext-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  margin: 5px;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);}
  .green.buttoncss3  { background-color: #91bd09; }
  .blue.buttoncss3   { background-color: #2daebf; }
  .red.buttoncss3    { background-color: #CC0000; }
  .magenta.buttoncss3{ background-color: #a9014b; }
  .orange.buttoncss3 { background-color: #ff5c00; }
  .yellow.buttoncss3 { background-color: #ffb515; }
  .purple.buttoncss3 { background-color: #663399; }
  .yellow.buttoncss3:hover   { background-color: #fc9200; }
  .green.buttoncss3:hover    { background-color: #749a02; }
  .blue.buttoncss3:hover      { background-color: #007d9a; }
  .red.buttoncss3:hover       { background-color: #872300; }
  .magenta.buttoncss3e:hover  { background-color: #630030; }
  .orange.buttoncss3:hover    { background-color: #d45500; }
  .purple.buttoncss3:hover { background-color: #330033; }
  .buttoncss3:hover           { background-color: #A1A1A1; color: #fff; }
  .buttoncss3:active          { top: 1px;} /*efek tekanan pada saat di-klik*/
  </style>
  </head>
 <body style="background: white; font-family: Helvetica">
 <h1>CSS3 Buttons </h1>
  <p><a  class="green buttoncss3">Go to Replace ID»</a>
  <a class="blue buttoncss3">Go to Replace ID»</a>
  <a class="red buttoncss3">Go to Replace ID»</a>>
  <a class="magenta buttoncss3">Go to Replace ID»</a></p><p>
  <a class="yellow buttoncss3">Go to Replace ID»</a>
  <a class="orange buttoncss3">Go to Replace ID»</a>
  <a class="buttoncss3">Go to Replace ID»</a>
  <a class="purple buttoncss3">Go to Replace ID»</a> 
  </p>
  </body>
  </html>