<div class="normal-container">
<div class="smile-rating-container">
<div class="smile-rating-toggle-container">
<form class="submit-rating">
<input id="meh" name="satisfaction" type="radio" />
<input id="fun" name="satisfaction" type="radio" />
<label for="meh" class="rating-label rating-label-meh">Bad</label>
<div class="smile-rating-toggle"></div>
<div class="rating-eye rating-eye-left"></div>
<div class="rating-eye rating-eye-right"></div>
<div class="mouth rating-eye-bad-mouth"></div>
<div class="toggle-rating-pill"></div>
<label for="fun" class="rating-label rating-label-fun">Fun</label>
</form>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto:700,900');
$ratingGreyColor: #d0cccd;
$ratingBlueColor: #00b9ee;
$ratingDarkColor: #555e63;
.normal-container {
position: absolute;
height: 100%;
width: 100%;
}
.smile-rating-container {
position: relative;
height: 10%;
min-width: 220px;
max-width: 520px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: $ratingGreyColor;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: $ratingGreyColor;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 58px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.smile-rating-toggle-container {
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: $ratingGreyColor;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 182px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
.rating-eye {
position: absolute;
height: 12px;
width: 8px;
top: 22px;
background: $ratingGreyColor;
border-radius: 500px;
z-index: 5;
transition: all 440ms;
animation: blink-eye 3s infinite;
}
@keyframes blink-eye {
0% {
height: 12px;
width: 8px;
top: 22px;
}
20% {
height: 12px;
width: 8px;
top: 22px;
}
40% {
height: 12px;
width: 8px;
top: 22px;
}
60% {
height: 12px;
width: 8px;
top: 22px;
}
80% {
height: 12px;
width: 8px;
top: 22px;
}
90% {
height: 12px;
width: 8px;
top: 22px;
}
95% {
height: 2px;
width: 8px;
top: 30px;
}
100% {
height: 12px;
width: 8px;
top: 22px;
}
}
.rating-eye-left {
left: 192px;
}
.rating-eye-right {
left: 216px;
}
.mouth {
position: absolute;
width: 28px;
height: 20px;
z-index: 6;
border: 4px solid $ratingGreyColor;
border-radius: 10%;
border-bottom-color: rgba(1,1,1,0);
border-right-color: rgba(1,1,1,0);
border-left-color: rgba(1,1,1,0);
top: 42px;
left: 190px;
transition: all 500ms;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: $ratingDarkColor;
}
#fun:checked~.rating-label-meh {
color: $ratingGreyColor;
}
#fun:checked~.mouth {
border: 4px solid $ratingBlueColor;
border-bottom-color: rgba(1,1,1,0);
border-right-color: rgba(1,1,1,0);
border-left-color: rgba(1,1,1,0);
top: 23px;
left: 291px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: $ratingDarkColor;
}
#fun:checked~.smile-rating-toggle {
left: 282px;
}
#fun:checked~.rating-eye-left {
left: 292px;
}
#fun:checked~.rating-eye-right {
left: 316px;
}
#fun:checked~.toggle-rating-pill {
background-color: $ratingBlueColor;
}
#fun:checked~.rating-eye {
background-color: $ratingBlueColor;
}
@media only screen and (max-width:524px) {
.normal-container {
position: absolute;
height: 100%;
width: 100%;
}
.smile-rating-container {
position: relative;
height: 10%;
width: 490px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: $ratingGreyColor;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: $ratingGreyColor;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 50px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.smile-rating-toggle-container {
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: $ratingGreyColor;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 168px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
.rating-eye {
position: absolute;
height: 12px;
width: 8px;
background: $ratingGreyColor;
border-radius: 500px;
top: 22px;
z-index: 5;
transition: all 440ms;
}
.rating-eye-left {
left: 180px;
}
.rating-eye-right {
left: 201px;
}
.mouth {
position: absolute;
width: 28px;
height: 20px;
z-index: 6;
border: 4px solid $ratingGreyColor;
border-radius: 10%;
border-bottom-color: rgba(1,1,1,0);
border-right-color: rgba(1,1,1,0);
border-left-color: rgba(1,1,1,0);
top: 42px;
left: 177px;
transition: all 500ms;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: $ratingDarkColor;
}
#fun:checked~.rating-label-meh {
color: $ratingGreyColor;
}
#fun:checked~.mouth {
border: 4px solid $ratingBlueColor;
border-bottom-color: rgba(1,1,1,0);
border-right-color: rgba(1,1,1,0);
border-left-color: rgba(1,1,1,0);
top: 23px;
left: 275px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: $ratingDarkColor;
}
#fun:checked~.smile-rating-toggle {
left: 266px;
}
#fun:checked~.rating-eye-left {
left: 275px;
}
#fun:checked~.rating-eye-right {
left: 300px;
}
#fun:checked~.toggle-rating-pill {
background-color: $ratingBlueColor;
}
#fun:checked~.rating-eye {
background-color: $ratingBlueColor;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.