<h1>Flat UI Buttons</h1>
<button class="turquoise">Button</button>
<button class="emerald">Button</button>
<button class="peterriver">Button</button>
<button class="wetasphalt">Button</button>
<button class="sunflower">Button</button>
body {
font-family: arial;
width: 100%;
background: #ecf0f1;
}
button {
border-top: 0;
cursor: pointer;
}
.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;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.