<body>
<div class="container">
<button class="button">Click Here</button>
</div>
</body>
:root {
--primary: #25abd9;
--primary-dark: #2090b7;
}
* {
box-sizing: border-box;
}
body {
background-color: #dcf5ff;
margin: 0;
padding: 0;
}
.container {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
.button {
background: var(--primary);
border: 0;
border-radius: 5px;
box-shadow: 0 6px 0 var(--primary-dark), 0 5px 15px -4px #000;
color: #fff;
cursor: pointer;
font-family: roboto;
font-size: 20px;
font-weight: 800;
height: 50px;
padding: 5px;
text-transform: uppercase;
transition: box-shadow 0.2s ease-in-out, margin-top 0.2s ease-in-out,
opacity 0.2s ease-in-out;
width: 150px;
}
.button:hover,
.button:focus {
opacity: 0.9;
outline: 0;
}
.button:active {
box-shadow: none;
margin-top: 6px;
}