Website button "Website buttonIt attracts the user's attention more than just a boring link. A better highlighted button will be easier to spot and lead the user to action. Therefore, in our text we explain how to style a button with CSS-and.

You want to get visitors to your website to download some content, sign up for your mailing list, or add a product to your 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 difficult to read. In general, it is best to use a large button with a large font and dark text.

Color

Use a background color that bounces off your page.

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

Form

A defined button shape can improve visibility and make the page experience easier for the user.

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

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

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

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

Add an arbitrary class to a button in WordPress

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

2. Save changes
3. You can use and add the same class several times, ie. on multiple buttons

How to style a button using CSS

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

• After logging in to WordPress site click the adjust button "Customize" (upper left corner) 
• Click Additional CSSAdditional CSS”- you will see a large text box

2. Button styling

You will see the usual "code", 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 a tag for a multi-line 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 keep in mind how it works, where you used it or what it is for.

3. Copy-and-paste CSS

To add your style to CSS, you must insert your class name and curly braces.

 / * don't forget to add a class selector, '.' prefix dot in front of 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 - edge thickness, solid - edge type and # 00ff00 - edge color * /

         / * can add more different properties in class… * /

}

/*

: hover indicates what will happen to the button,

when you hover your mouse over it,

in this case the button will turn blue

*/

.my-fancy-button: hover {

            background-color: # 0000ff;

}

4. Select the added class

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

Therefore, a selector should be used.

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

On the side where the button is located (in browser-u), right click on our stylized button and "Inspect Elements".

As we can see in the picture, the "my-fancy-button" class has been added parent element "div", And the button is marked with a blue line" a tag".

The “a” tag is located three divs below.

See more about CSS tags here.  

U Customizer-u we will replace the class name ".my-fancy-button"

with “div.moje-fensi-dugme> div> div> a”

div.moje-fensi-dugme> div> div> a {

/* my style */

}

div.moje-fensi-dugme> div> div> a: hover {

/* my style */

}

5. Save and publish “Publish”

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

Basic CSS styles for the button

Background color - background color, usually shown as a hexadecimal number, pr: # ff0000 (indicates red)

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

Border - Button edge thickness, usually shown in pixels.

Border color - Button edge color, usually displayed as a hexadecimal number.

Color - Button text color, usually displayed as a hexadecimal number.

Padding - the distance between the text and the edge of the element, usually shown in pixels;

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

Font size - text size.

This is just the basis for changing the look of an element using CSS.

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

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

You can see additional information about CSS on the website w3schools.

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