Floating Buttons

Tutorials of (Floating buttons) by Dbazuin

<!DOCTYPE html>
<html >
<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/ */
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/ */
// 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.

This awesome code ( Floating Buttons ) is write by dbazuin, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © dbazuin