Green Floaty Button

by Timar

HTML

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<style>


</style>
</head>

<body>
  <div class="element">
    <button class="button">Anmelden</button>
    <div>

    </div>
</body>

</html>

CSS

.button {
text-shadow: 0.5px 1px 0px rgba(205, 205, 205, 1),
1px 1.5px 1px rgba(0, 0, 0, 0.5);
transition-duration: 0.6s;
background-color: rgb(7, 158, 117);
color: white;
padding: 8px 25px;
text-decoration: none;
text-align: center;
margin: auto;
font-family: "Titillium Web";
font-size: 24px;
cursor: pointer; 
border-radius: 10px;
line-height: 22px;
border: none;
box-shadow: 
  /* 3D Darker */
  0px 5px 3px 0px rgba(0, 0, 0, 0.1),
  0px 5px 0px 0px rgba(0, 0, 0, 0.2),
  /* 3D Regular Green */
  0px 5px 0px 0px rgba(7, 158, 117, 1),
	/* roundness dark/bright */
  inset 0px -30px 26px 0px rgba(0, 0, 0, 0.07),
  inset 0px 26px 18px 0px rgba(255, 255, 255, 0.09),
 	/* highlight */
  inset 0px -1px 1px 0px rgba(255, 255, 255, 0.15),
  /* floorshadow */
  8px 13px 30px 0px rgba(0, 0, 0, 0.40);
}

.button:hover {background-color: rgb(7, 158, 117); /* Green */
border: none;
transform: translateY(-3px);
box-shadow:
  /* 3D Darker */
  0px 5px 3px 0px rgba(0, 0, 0, 0.1),
  0px 5px 0px 0px rgba(0, 0, 0, 0.15   ),
  /* 3D Regular Green */
  0px 5px 0px 0px rgba(7, 158, 117, 1),
  /* roundness dark/bright =0.30 */
  inset 0px -30px 26px 0px rgba(0, 0, 0, 0.07),
  inset 0px 20px 50px 0px rgba(255, 255, 255, 0.30),
  
  /* highlight */
  inset 0px -1px 1px 0px rgba(255, 255, 255, 0.15),
  /* floorshadow */
  9.7px 18px 45px rgba(0, 0, 0, 0.35);
  }

.button:active {
text-shadow: 0.5px 0.5px 0px rgba(205, 205, 205, 1),
1px 1.5px 1px rgba(0, 0, 0, 0.5);
transition-duration: 0.1s;
background-color: rgb(7, 158, 117); /* Green */
border: none;
box-shadow:
  /* 3D Darker */
  0px 5px 3px 0px rgba(0, 0, 0, 0.1),
  0px 5px 0px 0px rgba(0, 0, 0, 0.3),
  /* 3D Regular Green */
  0px 5px 0px 0px rgba(7, 158, 117, 1),
  /* roundness dark/bright =0.30 */
  inset 0px -30px 26px 0px rgba(0, 0, 0, 0.15),
  inset 0px 20px 50px 0px rgba(255, 255, 255, 0.0),
  
  /* highlight */
  inset 0px -1px 1px 0px rgba(255, 255, 255, 0.15),
  /* floorshadow */
  4px 8px 8px 0px rgba(0, 0, 0, 0.45);
...