<div class="box">
<p>Clearly, this is a box <br> with a box shadow :)</p>
</div>
body {
background-color: #1A237E;
box-sizing: border-box;
}
.box {
margin: 0 auto;
margin-top: 50px;
padding: 2em;
width: 400px;
height:100px;
background-color:#283593;
border-radius: 80px;
/* box shadow here*/
box-shadow: 0 10px 15px rgba(0,0,0,0.5);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);;
}
.box:hover {
transform:scale(1.1);
box-shadow: 0 3px 20px rgba(0,0,0,0.5);
cursor: pointer;
/* transform:translate(0px, -10px); */
}
.box > p {
color: silver;
text-transform: uppercase;
text-align:center;
font-size: 1.4em;
font-weight: bold;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.