How do I get this button layout? - html

Question

I'm trying to get this layout.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/kCjW9"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Here's the code I have. I can't seem to get z-index to work so that I could bring black border on top of the background.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/6a7Ev"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
.btn {
border-radius: 0px!important;
font-family: $font-roboto!important;
font-size: 1.125rem!important;
text-shadow: none!important;
box-shadow: none!important;
&.fountain-blue {
background-color: $color-fountain-blue;
color: #fff;
margin-left:5px;
margin-top: 5px;
margin-right: -10px;
}
}
.btn-border {
border: 2px solid #000;
display: inline-block;
height: 40px;
z-index: 9999!important;
}
<div class="btn-border mt-4">
learn more about us
</div>

Answer 1

There are a lot of ways to do this but simple method is to use pseudo-elements. check out the snippet.
CODEPEN (SASS version)
#import url("https://fonts.googleapis.com/css?family=Roboto");
.btn {
border-radius: 0px;
font-size: 1.125rem;
text-shadow: none;
box-shadow: none;
display: block;
width: calc(100% - 25px);
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.btn.fountain-blue {
background-color: #65becf;
color: #fff;
margin-left: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.btn-border {
display: inline-block;
height: 40px;
z-index: 9999;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn-border:after {
content: '';
border: 2px solid #000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="btn-border mt-4">
READ MORE
</div>

Answer 2

You should do it something like this, but than with your own colors and sizes.
.btn {
display: inline-block;
border: 1px solid black;
position: relative;
padding: 10px 20px;
margin: 20px;
color: #fff;
}
.btn:before {
background-color: blue;
border-color: green;
border-style: solid;
border-width: 10px 5px 5px 10px;
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: -5px;
left: -5px;
content: "";
}
<a class="btn">Read more</a>

Answer 3

As a possible solution.
* {
box-sizing: border-box;
}
body {
margin: 2em;
}
.btn {
background-color: darkblue;
color: white;
border: .2em solid white;
height: 2.5em;
width: 7em;
position: relative;
cursor: pointer;
}
.btn:before {
content: " ";
width: 9em;
height: 4em;
background-color: lightblue;
position: absolute;
top: -1em;
left: -1em;
z-index: -1;
}
.btn:after {
content: " ";
position: absolute;
background-color: transparent;
border: thin solid black;
height: 2em;
width: 6.5em;
top: -.5em;
left: -.5em;
}
<button class="btn">Click me</button>