How to give shadow in a button like this? - html

Question

In this button a shadow appearing and it looks like another button border there. I tried to use box-shadow property but I failed.
I used this CSS
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0px #2CBFBB;
}
Can anyone please help me?

Answer 1

You can achieve this effect with filter: drop-shadow and a transparent background:
body {
background: #76D7C4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>

Answer 2

Based on chazsolo's answer. It's possible to get shadow on button without shadow on text using absolutely positioned pseudoelement and CSS property inheritance:
body {
background: #76d7c4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
position: relative; /* new */
}
button:after {
content: "";
position: absolute;
/* Making pseudoelement the same size as container */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* Inheriting border properties */
border-radius: inherit;
border: inherit;
/* Applying filter with shadow */
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>

Answer 3

You can also do it by combining box-shadow: ... and box-shadow: inset .... Just adjust the box-shadow so it fits your needs.
Example
body {
background: #32DBD7;
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 35px;
padding: 10px 40px;
font-size: 34px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
}
<button>Learn More</button>

Answer 4

.test { margin-top: 2em; }
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0 darkgray;
text-decoration: none;
}
body {
background-color: #2CBFBB;
}
<div class="test">
Learn More
</div>