FAB add/close

In this example below you will see how to do a FAB add/close with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by diogo405, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright diogo405 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FAB add/close</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="plus js-plus">
	<div class="plus__wrapper">
		<span class="plus__sign js-plus-sign">+</span>
	</div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/diogo405/fab-addclose-RyJoqv */
body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus {
  background: blue;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  box-shadow: 2px 2px 4px grey;
  cursor: pointer;
  transition: all 300ms ease;
}

.plus:hover {
  opacity: 0.8;
}

.plus__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus__sign {
  color: white;
  font-size: 70px;
  transition: all 300ms ease;
  display: inline-block;
}

.plus__sign--close {
  transform: rotate(135deg);
  transform-origin: 50% 55%;
}


/*Downloaded from https://www.codeseek.co/diogo405/fab-addclose-RyJoqv */
document.querySelector('.js-plus').addEventListener('click', function () {
	document.querySelector('.js-plus-sign').classList.toggle('plus__sign--close');
});

Comments