HTML
<div id="content">
<button class="--btn --btn-blue">
That is nice!
</button>
<button class="--btn --btn-red">
Wow, but how?
</button>
<button class="--btn --btn-green">
God, that is sexy
</button>
<button class="--btn --btn-yellow">
Lookin' fresh
</button>
<button class="--btn --btn-dark">
Beautiful
</button>
<button class="--btn --btn-light">
This is great
</button>
<h1>Created by
<a href="https://codepad.co/MiniMike">
MiniMike
</a>
</h1>
</div>
LESS
@text:#fff;
@font:'Roboto Condensed', sans serif;
@--padding: 16px;
@--radius: 3px;
@--blue: #68a4ff;
@--red: #ff6868;
@--green: #8ad85d;
@--yellow: #ffc354;
@--dark: #3d3d3d;
@--light: #bcbcbc;
body{
color: @text;
font-family:@font;
}
a {
font-weight: 400;
color: #4883e2!important;
text-decoration: none!important;
&:link {
}
&:visited {
}
&:hover {
color: darken(#4883e2,15%);
text-decoration: underline;
}
}
h1 {color: #3d3d3d;}
[id="content"] {
padding: 25px;
text-align: center;
}
[class~="--btn"] {
border: 0px;
outline: 0px;
color: @text;
padding: 16px;
border-radius: @--radius;
&:hover {
opacity: 0.85;
}
&:active {
opacity: 0.75;
}
}
[class~="--btn"][class~="--btn-blue"]{
background-color: @--blue;
}
[class~="--btn"][class~="--btn-red"]{
background-color: @--red;
}
[class~="--btn"][class~="--btn-green"]{
background-color: @--green;
}
[class~="--btn"][class~="--btn-yellow"]{
background-color: @--yellow;
}
[class~="--btn"][class~="--btn-light"]{
background-color: @--light;
}
[class~="--btn"][class~="--btn-dark"]{
background-color: @--dark;
}
