Like/dislike button that likes/dislikes based on position on button

In this example below you will see how to do a Like/dislike button that likes/dislikes based on position on button with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SamuelJanes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SamuelJanes ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Like/dislike button that likes/dislikes based on position on button</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Hover/click on the top or the bottom of the button to like/dislike.</p>
<div class='btn-like'>
	<div class='thumbs-up'>
		<i class="fa fa-thumbs-up" aria-hidden="true"></i>
	</div>	
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SamuelJanes/likedislike-button-that-likesdislikes-based-on-position-on-button-xdrQmQ */
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-45deg, #8FBC94, #9fc6a3);
}

p {
  font-weight: 700;
  font-family: "Raleway", sans-serif;
}

.btn-like {
  width: 75px;
  height: 75px;
  background: #2EC4B6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  transition: 0.35s ease-in-out;
  cursor: pointer;
  box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
}
.btn-like .circle {
  width: 0;
  height: 0;
  border-radius: 100%;
}
.btn-like.top {
  background: #2EC4B6;
}
.btn-like.top .thumbs-up {
  transform: rotate(0deg);
}
.btn-like.bottom {
  background: #E71D36;
}
.btn-like.bottom .thumbs-up {
  transform: rotate(180deg);
}
.btn-like .thumbs-up {
  transition: 0.35s ease-in-out;
}
.btn-like .thumbs-up .fa {
  font-size: 25px;
  color: white;
}
.btn-like .thumbs-up .fa::before {
  display: block;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}


/*Downloaded from https://www.codeseek.co/SamuelJanes/likedislike-button-that-likesdislikes-based-on-position-on-button-xdrQmQ */
$(".btn-like").on('mousemove click', function(e){
	var $this = $(this),
			pos = e.pageY - $this.offset().top;
	
	if (pos >= $this.height() / 2){
		$this.removeClass("top");
		$this.addClass("bottom");
	}else if (pos < $this.height() / 2){
		$this.addClass("top");
		$this.removeClass("bottom");
	}
	
	
});

Comments