Creating outlined buttons in CSS

Hey there folks! Have you ever wanted to make an outlined button in css? It's a popular trend in web pages now, and you should probably include a few in your website. Here's how to make them

Demo: jsfiddle.net/ManuTheCoder/p9gnt0j6/69

Step 1

Let's style our button

.intro_btn {
  padding: 15px 20px;
  color: white;
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s;
  margin: 10px;
  border: 0;
  user-select: none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  background: black;
}

Explained

padding: 15px 20px - Adds padding to our element
color: white; - Makes the button color white
position: relative; - Makes the element position relative
display: inline-block; - Makes the elements next to each other.
transition: all 0.2s; - Animates the transitions
margin: 10px; - Sets the element's margin to 10px
border: 0; - Removes default border
user-select: none; - Prevents users from selecting the element
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;` - Changes the font
background: black; - Sets the background color.

You should see something like this...

Step 2

Let's create a border

.intro_btn::after {
  content: "";
  position: absolute;
  width: 100%;
  transition: all 0.2s;
  height: 100%;
  border: 2px solid #000;
  left: 5px;
  top: 5px;
  bottom: -5px;
  z-index: -1;
}

Explained

content: ""; - Renders the div
position: absolute; - Makes the div absolute positioned
width: 100%; - Makes the box as big as the div
transition: all 0.2s; - Animates the transitions
border: 2px solid #000; - Creates a border
left: 5px; - Offset of 5px (left)
top: 5px; - Offset of 5px (top)

Step 3

Let's add a hover effect

.intro_btn:hover {
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

Step 4

Let's remove the border when the button is active

.intro_btn:active {
  transform: translate(8px, 8px)
}
.intro_btn:active::after {
  transform: translate(-7px, -7px)
}

Great job! You've created an outlined button in CSS!