Listen to this article
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 elementcolor: white;
- Makes the button colorwhite
position: relative;
- Makes the element position relativedisplay: inline-block;
- Makes the elements next to each other.transition: all 0.2s;
- Animates the transitionsmargin: 10px;
- Sets the element's margin to 10pxborder: 0;
- Removes default borderuser-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 divposition: absolute;
- Makes the div absolute positionedwidth: 100%;
- Makes the box as big as the divtransition: all 0.2s;
- Animates the transitionsborder: 2px solid #000;
- Creates a borderleft: 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!