Floating Buttons

In this example below you will see how to do a Floating Buttons with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Floating Buttons</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  background: hsl(50,50%,90%);
}
body {
  text-align: center;
  padding-top: 100px;
}

button.demo {
  background-color: hsl(200,80%,40%);
	border: 1px solid hsl(200,80%,30%);
}
button.signup {
  background-color: hsl(0,80%,40%);
	border: 1px solid hsl(0,80%,30%);
}

button {
  margin: 0 10px;
	width: 120px;
  height: 40px;
  border-radius: 20px;
	color: white;
  font-size: 15px;
  font-weight: bold;
  background-image: linear-gradient(top, hsla(0,0%,100%,.2) 1px, hsla(0,0%,100%, 0) 1px, hsla(0,0%,0%, .1) 100% );
  box-shadow: 0 60px 12px -18px hsla(0,0%,0%,.1),
    					0 60px 20px -12px hsla(0,0%,0%,.1);
  animation: float 1s infinite ease-in-out alternate;
}

button.signup {
  animation-delay: .3s;
}


@keyframes float {
	100% {
    transform: translateY(20px);
    box-shadow: 0 40px 10px -18px hsla(0,0%,0%,.2),
    					0 40px 16px -12px hsla(0,0%,0%,.2);
  }
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <button class="demo">DEMO</button>
<button class="signup">SIGNUP</button>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/dbazuin/floating-buttons-Aabcf */
html {
  background: hsl(50,50%,90%);
}
body {
  text-align: center;
  padding-top: 100px;
}

button.demo {
  background-color: hsl(200,80%,40%);
	border: 1px solid hsl(200,80%,30%);
}
button.signup {
  background-color: hsl(0,80%,40%);
	border: 1px solid hsl(0,80%,30%);
}

button {
  margin: 0 10px;
	width: 120px;
  height: 40px;
  border-radius: 20px;
	color: white;
  font-size: 15px;
  font-weight: bold;
  background-image: linear-gradient(top, hsla(0,0%,100%,.2) 1px, hsla(0,0%,100%, 0) 1px, hsla(0,0%,0%, .1) 100% );
  box-shadow: 0 60px 12px -18px hsla(0,0%,0%,.1),
    					0 60px 20px -12px hsla(0,0%,0%,.1);
  animation: float 1s infinite ease-in-out alternate;
}

button.signup {
  animation-delay: .3s;
}


@keyframes float {
	100% {
    transform: translateY(20px);
    box-shadow: 0 40px 10px -18px hsla(0,0%,0%,.2),
    					0 40px 16px -12px hsla(0,0%,0%,.2);
  }
}

/*Downloaded from https://www.codeseek.co/dbazuin/floating-buttons-Aabcf */
// Floating Buttons
// with a single element

// Requested by @mlevy23 https://cl.ly/0z330T3o1m3T1K15292x

// If all browsers would support animation of pseudo elements, the shadow could be done with an :after and would look much more realistic. For now, that's the best I can think of.

// Warning: Performance is very bad, don't use in production.

Comments