Style CSS Primary Button You Usually Use In Your Websites - Best Practice

Buttons are a common element that may be seen on any website. Before we begin, I'd want to explain why we use buttons on websites. Many people are confused about the difference between a button and a link. 

We utilize buttons to conduct actions such as submitting a form, uploading an image, canceling an action, editing, deleting, and so on, but a link is a hyperlink that we use to navigate from one page to another.

A button on a website should make sense; it is not user-friendly if it is solely there for styling purposes.

In HTML we use the “button” tag, it will create a default button that looks ugly.

<button>text</button>

The other option is the type=”button” attribute, it still creates an ugly default button.

<input type="button" value="text">

Overriding default style 

People tend to use the div element to deal with default behavior because different browsers have different styles for buttons, however, this is not a good approach; instead, we should utilize the "Button" element for accessibility reasons.

Let's override some style properties (I'm using the class ".btn") to style it differently.

.btn {
  webkit-appearance: button;
  border: none;
  text-transform: none;
  font-size: 100%;
  overflow: visible;
  margin: 0;
}

Styling Primary Button CSS 

For the styling button, we add text and optionally use background, border, color and other properties, I am going to walk you through it.

Button Labels: Make sure it should explain clearly to your user or client, it should not be confusing. Text should tell the user is about to interactions like - ‘confirm’ or ‘cancel’.

<button class=”btn”>Click me!</button>

Next, we'll give our custom design a background color to fill the button backdrop and text color.

background-color: #405cf5;
color: #fff;

To fill the background color for our major button, we should think about our website theme and style. When it comes to accessibility, color contrast is crucial. Avoid utilizing the same contrast for text, icons, and backgrounds.

Spacing:  Padding can be used to add space around text or increase the visibility of a button. 

padding: 1rem 2rem;

Shape:  For now, we'll utilize border radius to create a shape. Sharp corner buttons and buttons with a slightly rounded corner are the most frequent button styles. It's also known as web button best practice. 

border-radius: 6px;

Shadow:  To make it pressable, we'll employ shadow. To make it translatable, I'm utilizing rgb code.

box-shadow: 0 2px 2px rgb(64, 92, 245, 0.4);

Hover and Focus:  This feature allows us to modify the state of the button to demonstrate interactivity. When the user's cursor is over a button element, it is said to be hovering. and the focus is on the user's use of the keyboard to highlight the button element.

I'm using a light shade of blue to change the state of the object when the user interacts with it, outline:none; to remove the default style.

.btn:hover,
.btn:focus {
  background: #5d75f6;
  outline: none;
}

Active:  When the user presses the button, the active state is activated, lets's use the shadow surrounding the button and return the button's original color. 

.btn:active {
  box-shadow: 0 0 5px #405cf5;
  background: #405cf5;
}

See the Pen CSS Button Style by Elpeeda (@Mahe76) on CodePen.

Conclusion

In this post, we learned how to create a primary button. I recommend that you don't make your buttons too sophisticated, as this may confuse your users and cause them to avoid using them. Instead, make it clear that they are buttons and make them interactive.

Consistency is crucial; make your button look constant throughout your site, and users will be more likely to take action.