Pure CSS3 Expression Toggle Style Switch Toggle Button

Pure CSS3 Expression Toggle Style Switch Toggle Button: BY Anthony12 Jan,2021; Tags:
CSS3 Button

Introduction

This time we want to bring you this switch switch button is also very creative, it is a pure CSS3 implementation of the expression style, click will switch between smiley and crying face, while also constantly blinking eyes.

Instructions

HTML Body Code

<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>

Css Code

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

VIEW NOW