ManuTheCoder
ManuTheCoder's Blog

ManuTheCoder's Blog

Creating outlined buttons in CSS

Creating outlined buttons in CSS

ManuTheCoder's photo
ManuTheCoder

Published on Nov 1, 2021

2 min read

Subscribe to my newsletter and never miss my upcoming articles

image.png 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... image.png

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!

Demo: jsfiddle.net/ManuTheCoder/p9gnt0j6/69

 
Share this
Proudly part of