Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Oluwasetemi/a5ec138ec769e31d100e5a7284c87152 to your computer and use it in GitHub Desktop.
Save Oluwasetemi/a5ec138ec769e31d100e5a7284c87152 to your computer and use it in GitHub Desktop.
Flat UI Buttons
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment