I have been trying to replicate this "subscribe to the newsletter button". I am having a hard time replicating the white "inside border or outline". example of the button
You may use an inset shadow
button {
background:turquoise;
border:solid turquoise;
padding:5px;
box-shadow:inset 0 0 0 3px white;
<button>inside border ?</button>
You can also mix borders with inset and outset shadows http://codepen.io/gcyrillus/pen/yJfjl ;)
You can simply achieve this button styling with a combination of border-radius
and box-shadow
:
button {
background: darkcyan;
border: 7px solid darkcyan;
color: white;
font-size: 1.5em;
text-transform: uppercase;
padding: 20px 30px;
border-radius: 15px;
box-shadow: inset 0 0 0 2px white;
}
<button>Subscribe to newsletter</button>
With the border
rule you set the outer border and with border-radius
you round the corners. This will also effect the box-shadow, which will produce the inner white border line.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With