Gutenberg Button Styles

Gutenberg Button Styles

WordPress Button Styles – Overview

In this article, we discuss how to create simple buttons in WordPress without using any plugins. You can change a simple piece of text or link into a button in WordPress using these techniques. You can also use these techniques to style your default buttons inside WordPress.

Prerequisite

Good to know

You should know the basics of CSS or at least possess some basic understanding of the CSS to achieve this. It is also essential that you learn how to add a custom class in WordPress Gutenberg and where to add the custom CSS in WordPress. Do not panic if you are unaware of what is CSS and how it works. We will share all the needed steps through this article to make it easy for you. If you follow the steps as directed, you should be good to go.

Applies only to sites hosted on WordPress.com

If your site is hosted on WordPress.com hosting, you will need to have Custom CSS Options enabled which is a feature of WordPress.Com Premium and Business Plans. If you haven’t already brought the WordPress.Com Premium and Business Plan, you should consider one to gain more flexibility with your WordPress.com Site/Blog.

Let’s Roll!

We are breaking the entire CSS code discussed in this article into small blocks so that it becomes easy for you to understand how to make use of it effectively. Let us help you understand the code block by block. We are aiming to create six buttons with different styles. All these six buttons have few styles in common. With that in mind, we group all the six buttons for specific styles so that we do not have to repeat the code for individual buttons and apply common styling on the entire group.

We then proceed to style each button individually by individual styles using the CSS code. After the completion, we provide the entire block of this code as one piece for your reference.

Important Note

Kindly note that these styles are using their specific class names for demonstration. The class name may differ in your situation, and you should use the proper class names for the styles to work for you on your WordPress website. You may refer to CSS Basics for CSM Tools article for an understanding of some of the CSS basics to learn about how you can grab the name of the class of any element on the page and apply the custom CSS styling.

How to apply custom class in Gutenberg

Button Styles in WordPress

Let us start with the first block of CSS code, where we group all the buttons that we are planning to style using their class names to apply a common style shared among them. Given below is the CSS code.

The first block of CSS Code

.primary-button,
.success-button,
.info-button,
.error-button,
.warning-button,
.secondary-button {
   color: white;
   border-radius: 3px;  
   text-align: center;
   padding: 5px;
   box-shadow: 0 0 17px 0 rgba(0,0,0,0.06);
   transition: .3s;
        }

CSS code block explained

In the code above, we have grouped all the class names separating them with a comma. To familiarize yourself with the grouping concept, please refer CSS Basics article on this site. Now we open the Code block with the curly bracket.

color property

We begin with the color property declaration on line 7 and set its value to White and end the statement with a semicolon.

border-radius property

The second property is border-radius at line 8, where we have set the value to 3 pixels to slightly round the corners of our buttons. Finally, end the statement with a semicolon.

text-align property

We make use of the text-align property at line 9 to set the text alignment in the center and end the statement with a semicolon.

padding property

Using the padding property at the line 10, we set the padding for all the four sides to 5 pixels. This way, our text inside the button gets a decent spacing on the top, right, bottom, and left side of the button text. We can define padding to individual sides by declaring it individually in a clockwise direction. Example, if the value is set to “5px 0px 5px 0px” it will apply five pixels on top, zero pixels on right, 5 pixels on bottom and zero pixels on the left side of the button text.

box-shadow property

At the line 11, we use the box-shadow property to drop shadow behind the buttons. Refer to the image below for a clear understanding of each of the values used inside the box-shadow property.

Add Shadow to buttons in WordPress
Add Shadow to buttons in WordPress

The values we use and the values in the image are not identical. However, the position of each of these values are clearly defined for your understanding of the image.

transition property

The transition CSS property used at line 12 is shorthand for transition-property, transition-duration property, transition-timing-function property, and transition-delay property. We have set the value of transition property .3 seconds so that each time the property changes from its current state, the transition would come into action. For example, if we have set a different styling on mouse over this button, the transition would come into action each time we place the mouse over this button.

The second block of CSS Code

.primary-button:hover,
.success-button:hover,
.info-button:hover,
.error-button:hover,
.warning-button:hover,
.secondary-button:hover {
box-shadow: 0 20px 25px rgba(0,0,0,0.15);
transform: translateY(-4px);
        }

CSS code block explained

In the above code, we have used a CSS pseudo-class with the class name. Pseudo-class comes into action each time a user interacts with the element with a pointing device such as a mouse. The pseudo-class name is placed usually with a : symbol at the end of the class name. For example, “.classname:hover” where hover is the CSS pseudo-class name.

:hover CSS pseudo-class

Since we wanted to apply a common styling when somebody places the mouse on the top of the button, we have grouped all the classes which pseudo-class :hover. Any style in this part of the code comes into action every time a mouse is placed over the elements with the class names used in this CSS code block.

box-shadow property

Kindly refer to the box-shadow property in the section above as we have already discussed it.

transform property

With the help of transform CSS property, we can interact with the element in a variety of ways. For example, we can scale, skew, rotate, or translate an element. To learn more about this property, click here.

translateY() CSS function

We have used the translateY() CSS function to set the value for translate property. With the help of the translateY() function, we can reposition any element vertically on the 2D plane. By setting the value to -4 pixels, we are instructing the element to rise 4 pixels when a mouse hovers on it.

Third Block of CSS Code

In the 3rd block of the CSS code, we have the code of all the individual classes block by block.

Individual Classes Styling CSS Code

.primary-button {
background-color: #007bff;
		}

.success-button {
background-color: #28a745;
        }
		
.info-button{
background-color: #17a2b8;
		}

.error-button {
background-color: #dc3545;
        }

.warning-button {
background-color: #ffc107;
        }

.secondary-button {
background-color: #6c757d;
        }

CSS code block explained

You may have noticed by now that we have similar properties used in all different classes in the code above. However, if you pay close attention, notice that we have used different colors for each of them. As we are using different colors for each of the classes, we cannot group them, and hence we have to place them separately.

background-color property

Background color property helps to set the color of the background of the button. You may switch the values of the color with your desired colors If you are using it for your WordPress website. We have used the standard BootStrap colors for this demonstration.

Gutenberg button styles – Final Output

Here are the buttons that we have designed using the code above. Place your mouse over each of the buttons to see the transition and translate effects in action.

Primary

Success

Information

Error

Warning

Secondary

Button styles in WordPress

If you desire to make use of colors of your choice, here is a website [Color-Wheel by Adobe] that you can use to produce your colors. Adobe Color is a straightforward tool and is relatively simple to use. See the image below for your reference.

WordPress button styles
WordPress button styles

Once you are satisfied with the color combinations you have produced, you can copy the hex value of the color and use it in your CSS code.

Gutenberg button styles CSS Code

As mentioned earlier in this article, we bring you the full CSS code used to style these buttons. Refer to the code below

Full CSS code block

.primary-button,
.success-button,
.info-button,
.error-button,
.warning-button,
.secondary-button {
color: white;
border-radius: 3px;  
text-align: center;
padding: 5px;
box-shadow: 0 0 17px 0 rgba(0,0,0,0.06);
transition: .3s;
        }
		
.primary-button:hover,
.success-button:hover,
.info-button:hover,
.error-button:hover,
.warning-button:hover,
.secondary-button:hover {
box-shadow: 0 20px 25px rgba(0,0,0,0.15);
transform: translateY(-4px);
        }
		
.primary-button {
background-color: #007bff;
border-color: #007bff;
		}

.success-button {
background-color: #28a745;
border-color: #28a745;
        }
		
.info-button{
background-color: #17a2b8;
border-color: #17a2b8;
		}

.error-button {
background-color: #dc3545;
border-color: #dc3545;
        }

.warning-button {
background-color: #ffc107;
border-color: #ffc107;
        }

.secondary-button {
background-color: #6c757d;
border-color: #6c757d;
        }

Where do we add custom CSS code in WordPress?

Now that you have the code understanding and know-how to create your custom buttons, you must also know where to place the custom CSS code in WordPress. The options to place the Custom CSS are mostly available in Appearance > Customize from your WordPress Administration area. You may also refer to this article for a visual guide on where to put the custom CSS code in WordPress.

Gutenberg button styles – Conclusion

WordPress button styles
WordPress button styles

We have come to the end of this article with this section. Soon we will bring you more versatile and modern CSS designs that you can use in your WordPress projects. Stay tuned with us.

We hope you find this article/Demonstration useful. In case you are stuck and or need help, feel free to drop a comment below or submit your question. Do share it further and add your feedback about the article in the comments section.

About Syed Hussaini

I am a business consultant with 15+ Years of extensive expertise in IT Services Management (ITSM), Team Management, Training, Knowledge Management, and Customer and Technical Support. My involvement in a corporate environment and freelance projects has taught me how to be more productive, proactive, and independent.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.