ManuTheCoder
ManuTheCoder's Blog

ManuTheCoder's Blog

Creating outlined buttons in CSS

Creating outlined buttons in CSS

ManuTheCoder's photo
ManuTheCoder
·Nov 1, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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