3d Button

Really simple sass 3d box-shadow button with an :active state.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>3d Button</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'> 
<div id="container">
  <a href="#">Click Me</a>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#container {
  max-width: 175px;
  margin: 4em auto;
}

a {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  border: 3px solid;
  padding: 0.25em 0.75em;
  -moz-box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  -webkit-box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
}
a:active {
  -moz-box-shadow: 0px 0px 0px 0px;
  -webkit-box-shadow: 0px 0px 0px 0px;
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( 3d Button ) is write by barrada, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © barrada