Flat UI Colors (Pure CSS using :checked)
HTML
<input type="radio" name="name" checked="checked"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
<input type="radio" name="name"/>
<div></div>
SCSS
@import 'https://fonts.googleapis.com/css?family=Oswald';
$tab-color1: #1abc9c;
$tab-color2: #2ecc71;
$tab-color3: #3498db;
$tab-color4: #e74c3c;
$tab-color5: #34495e;
$tab-color6: #9b59b6;
$tab-color7: #f1c40f;
$tab-color8: #e67e22;
html, body {
height: 100%;
position: relative;
overflow: hidden;
margin: 0;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.4s ease;
transform: translateX(-100%);
&:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5vw;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
color: #fdfdfd;
letter-spacing: 4px;
}
&:nth-of-type(1) {
background-color: $tab-color1;
&:after { content: "#1abc9c"; }
}
&:nth-of-type(2) {
background-color: $tab-color2;
&:after { content: "#2ecc71"; }
}
&:nth-of-type(3) {
background-color: $tab-color3;
&:after { content: "#3498db"; }
}
&:nth-of-type(4) {
background-color: $tab-color4;
&:after { content: "#e74c3c"; }
}
&:nth-of-type(5) {
background-color: $tab-color5;
&:after { content: "#34495e"; }
}
&:nth-of-type(6) {
background-color: $tab-color6;
&:after { content: "#9b59b6"; }
}
&:nth-of-type(7) {
background-color: $tab-color7;
&:after { content: "#f1c40f"; }
}
&:nth-of-type(8) {
background-color: $tab-color8;
&:after { content: "#e67e22"; }
}
}
input[type="radio"] {
position: absolute;
right: 0;
width: 25%;
height: 20px;
outline: 20px solid;
outline-offset: -10px;
margin: 0;
z-index: 1;
cursor: pointer;
&:nth-of-type(1) { outline-color: $tab-color1; left: 0%;}
&:nth-of-type(2) { outline-color: $tab-color2; left: 25%;}
&:nth-of-type(3) { outline-color: $tab-color3; left: 50%;}
&:nth-of-type(4) { outline-color: $tab-color4; left: 75%;}
&:nth-of-type(5) { outline-color: $tab-color5; left: 0%; bottom: 0px;}
&:nth-of-type(6) { outline-color: $tab-color6; left: 25%; bottom: 0px;}
&:nth-of-type(7) { outline-color: $tab-color7; left: 50%; bottom: 0px;}
&:nth-of-type(8) { outline-color: $tab-color8; left: 75%; bottom: 0px;}
&:checked {
+ div {
transform: translateX(0%);
transition: transform 0.4s ease 0.4s;
}
}
}
