Custom Feminine, Modern Buttons

If you’re looking for buttons that really bring your design to a new level, these are it. They’re modern, creative, and they’re a part of a design trend that’s really beginning to catch. Here’s how to create them.

1. Create a button

Create a button on your page, and go ahead and assign an ID to it. For this specific demo, we’ll name it #btn-modern. I’m using Elementor, so this is what it looks like on my end.

2. Style your button the way you’d like

You can either do this within CSS when we’re there, or you can do it using your page builder/site settings. Personally, I like doing it before the CSS because I like having all of my custom code in one place, knowing that the base style has already been taken care of.

3. Pop into your CSS file, and add this code

#btn-modern::before {  
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: 6px;
  bottom: 6px;
  outline: 2px solid #STATIC_COLOR_HERE;
  pointer-events: none;
}  

#btn-modern:hover::before {
  outline: 2px solid #HOVER_COLOR_HERE;
}

Now, your outline position will change based on your own preference for how far you want the line to be from your button, as well as how thick you want it to be. But that’s it! You’re done.

If you’re interested in the why, here’s a breakdown:

#btn-modern:before

This is a before pseudo, used to add elements to IDs and divs. It allows you to add content to a page without having it be within the HTML. Once you get more comfortable with CSS, you start learning what great assets pseudos are.

content: '';

This is needed with all pseudo elements. Your pseudo element has an initial value of “none,” so without defining it as an empty string, your element won’t show up.

position: absolute;

Position has six different values you can choose from – static, relative, absolute, fixed, sticky, and inherit. Absolute allows you to place your element literally anywhere you want it to be. The nice thing about using it here is that it doesn’t affect the positioning of any other elements, nor is it affected by any other elements. If your button itself were to be changed to have an absolute position instead of static, it would also not be affected by other elements’ positions. But this absolute position’s values will be relative to the parent’s element, which is your button.

top: -3px;
left: -3px;
right: 6px;
bottom: 6px;

Here we have where we want the outline to be in relation to the parent element, which is the button. We’re telling it that we want the top of the outline to be 3px above the button, 3px to the left of the button, 6px from the right, and 6px from the bottom.

outline: 2px solid #STATIC_COLOR_HERE;

This creates your button’s outline. It’s telling the page we want a 2px wide line all around the button, we want it to be solid, and we want it to be X color. You can also use the border attribute with this.

pointer-events: none;

This is the most important part of this element. Without it, your button will only be clickable in the area that the outline/pseudo element doesn’t overlap (few px on the bottom and ride side). This attribute tells the page we want this pseudo element to not have an active role with the mouse. If you go ahead and delete this line, you’ll see that you can’t interact with your button in the space your pseudo element is.

#btn-modern:hover::before 

We’re now telling the page how we want the button to be style when it’s hovered over, with regard to the pseudo element. “hover” is always used within CSS to define this.

outline: 2px solid #HOVER_COLOR_HERE;

Since we already defined the pseudo element in the static state, all we need to do is define its new outline color. Or, perhaps you want to shift the position of the line. Whatever you’d like to do, you’ll change it within these brackets, and the new styling will reflect on hover.