A website button ” Website button ” attracts the user’s attention more than a simple boring link. A better highlighted button will be easier to spot and prompt the user to take action. Therefore, in our text, we explain how to style a button using CSS .

You want to get your website visitors to download some content, subscribe to your mailing list, or add a product to their cart.

The color, size, position and other visual elements of buttons on a website can affect the number of clicks.

Three “best practices” for designing buttons

Readability

Small buttons with small text are hard to read. It is generally best to use a large button with a large font and dark text color.

Color

Use a background color that pops off your page.

Choosing a font color that contrasts with the color of the button is another way to add contrast.

Shape

A defined button shape can improve visibility and ease the user’s experience on the page.

Using CSS, you can easily create buttons with square or rounded edges, different edge thicknesses, etc.

Adding too many buttons is not desirable. Too many buttons can confuse the user.

In general, adding one main button per page is a good practice.

You don’t need to know much about CSS to change the size, shape, color or text of a button.

Adding an arbitrary class to a button in WordPress

1. After adding the button to the page, you need to add the class name directly in the button setting “Extra class name” or “CSS Classes”. Let’s say you can add to the “Extra class name” field: my-fancy-button

2. Save changes
3. You can use and add the same class more than once, ie. on more buttons

How to style a button with CSS

1. After adding an arbitrary name to the button, access the ” Customizer “

• After logging in to the WordPress site , click the ” Customize ” button (top left corner)
• Click Additional CSS ” Additional CSS ” – a large text box will appear

2. Button styling

The usual “code” will appear, ie. a comment similar to this

in the text box on the left:

/*

Welcome to Custom CSS!

To learn how this works, see https://wp.me/PEmnE-Bt

*/

/* example comment, text can be anything */ – this is the tag for a multiline comment in CSS.

Feel free to delete it or add your own as needed.

Comments are usually used when you want to emphasize something, or to keep in mind how it works, where you’ve used it, or what it’s for.

3. Copy-and-paste CSS

To add your style to CSS, you need to include your class name and curly braces.

/* don’t forget to add the class selector, ‘.’ prefix a dot in front of the class name */

.my-fancy-button {

font-size: 16px; /* font height */

background-color: #ff0000; /* button background color */

border-radius: 16px; /* button radius */

border: 3px solid #00ff00; /* 3px – border thickness, solid – border type and #00ff00 – border color */

/* multiple different properties can be added in a class… */

}

/*

:hover indicates what will happen to the button,

when you mouse over it,

in this case the button will turn blue

*/

.my-fancy-button:hover {

background-color: #0000ff;

}

4. Selecting the added class

It is very likely that the class you will add to the “my-fancy-button” button will not be located exactly in the button element, but in several parent ” parent ” elements above.

This is why you should use a selector.

In CSS, selectors are patterns used to select the elements you want to style.

On the side where the button is located (in the browser ), right click on our stylized button and ” Inspect Element “.

As we can see in the picture, the class “my-fancy-button” is added to the parent element ” div “, and the button is marked with a blue line “a tag “.

The “a” tag is three divs down.

See more about CSS tags here.

In the Customizer , we’ll replace the class name with “.my-fancy-button”

with “div.my-fancy-button> giant> giant> a”

div.my-fancy-button> giant> giant> and {

/* my style */

}

div.my-fancy-button> giant> giant> a:hover {

/* my style */

}

5. Save and “Publish”

CSS can be used to customize many different elements on a website, including a button.

Basic CSS styles for a button

Background-color — background color, usually displayed as a hexadecimal number, eg: #ff0000 (indicates red color)

Hexadecimal Colors : w3schools.com/colors/colors_picker.asp

Border — the thickness of the button’s borders, usually displayed in pixels.

Border-color — The border color of the button, usually displayed as a hexadecimal number.

Color — the color of the button’s text, usually displayed as a hexadecimal number.

Padding — space between the text and the edge of the element, usually displayed in pixels;

Text-align — text alignment, can be left, right or center.

Font-size — text size.

This is just the basics of changing the appearance of an element using CSS.

You can use one of the online button generators or other elements and use the generated style for your fancy button.

The best way to learn CSS is through practice and real examples, the more you play with it the better you will understand it.

Additional information about CSS can be found on the w3schools website.

For more news and interesting stories from digital marketing, visit our blog page or follow our Instagram profile.