Flat UI Buttons

Flat UI Buttons.markdown

Flat UI Buttons

Originally by Jack Rometty

Forked from SitePoint's Pen Flat UI Buttons.

A Pen by Ojo Oluwasetemi on CodePen.

License.

index.html

<h1>Flat UI Buttons</h1>


<a href="#" class="turquoise">Button</a>
<a href="#" class="emerald">Button</a>
<a href="#" class="peterriver">Button</a>
<a href="#" class="wetasphalt">Button</a>
<a href="#" class="sunflower">Button</a>   

style.css

body {
  font-family: arial;
  width: 100%;
  background: #ecf0f1;
}

a {
  text-decoration: none;
}

p {
  color: #525252;
  font-size: 12px;
  text-align: left;
}

.turquoise {
  margin-right: 10px;
  width: 100px;
  background: #1abc9c;
  border-bottom: #16a085 3px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.turquoise:hover {
  opacity: 0.8;
}

.turquoise:active {
  width: 100px;
  background: #18B495;
  border-bottom: #16a085 1px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.emerald {
  margin-right: 10px;
  width: 100px;
  background: #2ecc71;
  border-bottom: #27ae60 3px solid;
  border-left: #27ae60 1px solid;
  border-right: #27ae60 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.emerald:hover {
  opacity: 0.8;
}

.emerald:active {
  margin-right: 10px;
  width: 100px;
  background: #2BBB68;
  border-bottom: #27ae60 1px solid;
  border-left: #27ae60 1px solid;
  border-right: #27ae60 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.peterriver {
  margin-right: 10px;
  width: 100px;
  background: #3498db;
  border-bottom: #2980b9 3px solid;
  border-left: #2980b9 1px solid;
  border-right: #2980b9 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.peterriver:hover {
  opacity: 0.8;
}

.peterriver:active {
  width: 100px;
  background: #2385C7;
  border-bottom: #2980b9 1px solid;
  border-left: #2980b9 1px solid;
  border-right: #2980b9 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.wetasphalt {
  margin-right: 10px;
  width: 100px;
  background: #34495e;
  border-bottom: #2c3e50 3px solid;
  border-left: #2c3e50 1px solid;
  border-right: #2c3e50 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.wetasphalt:hover {
  opacity: 0.8;
}

.wetasphalt:active {
  width: 100px;
  background: #2D3F51;
  border-bottom: #2c3e50 1px solid;
  border-left: #2c3e50 1px solid;
  border-right: #2c3e50 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.sunflower {
  margin-right: 10px;
  width: 100px;
  background: #f1c40f;
  border-bottom: #f39c12 3px solid;
  border-left: #f39c12 1px solid;
  border-right: #f39c12 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.sunflower:hover {
  opacity: 0.8;
}

.sunflower:active {
  width: 100px;
  background: #DAB10E;
  border-bottom: #f39c12 1px solid;
  border-left: #f39c12 1px solid;
  border-right: #f39c12 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.carrot {
  margin-right: 10px;
  width: 100px;
  background: #e67e22;
  border-bottom: #d35400 3px solid;
  border-left: #d35400 1px solid;
  border-right: #d35400 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.carrot:hover {
  opacity: 0.8;
}

.carrot:active {
  width: 100px;
  background: #CE6F17;
  border-bottom: #d35400 1px solid;
  border-left: #d35400 1px solid;
  border-right: #d35400 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.alizarin {
  margin-right: 10px;
  width: 100px;
  background: #e74c3c;
  border-bottom: #c0392b 3px solid;
  border-left: #c0392b 1px solid;
  border-right: #c0392b 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.alizarin:hover {
  opacity: 0.8;
}

.alizarin:active {
  width: 100px;
  background: #E64533;
  border-bottom: #c0392b 1px solid;
  border-left: #c0392b 1px solid;
  border-right: #c0392b 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

.concrete {
  margin-right: 10px;
  width: 100px;
  background: #95a5a6;
  border-bottom: #7f8c8d 3px solid;
  border-left: #7f8c8d 1px solid;
  border-right: #7f8c8d 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.concrete:hover {
  opacity: 0.8;
}

.concrete:active {
  width: 100px;
  background: #8A9C9D;
  border-bottom: #7f8c8d 1px solid;
  border-left: #7f8c8d 1px solid;
  border-right: #7f8c8d 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}