Animated 3d Buttons for WordPress Gutenberg

Animated 3d Buttons for Gutenberg – Overview

Animated 3D buttons for WordPress Gutenberg is an article to help you understand how you can build an animated 3D button for your WordPress website.

We make no use of any plugins in this demonstration. The button we create in this demonstration is a pure CSS animated 3D button for WordPress Gutenberg.

Good to Know

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!

To build a 3D animated button, we have two blocks of CSS code. We present the code block by block, each followed by its explanation. Finally, we put the complete code as one block for your reference towards the end of this article.

We are using one CSS class in this demonstration to build the 3D animated CSS button. Let us begin by discussing the first block of CSS code in this demonstration.

Basic Button Style – CSS Code

.blue-button{
position: relative;
padding: 20px 40px;
margin: 10px 20px;
font-size: 26px;
font-weight: 600;
text-align: center;
text-decoration: none;
background-color: #26ADE4;
color: #fff;
border-radius: 7px;
box-shadow: 0px 12px 1px #0082b5;
transition: 0.2s all;
}

Basic Button Style – CSS Code Explanation

We have the above CSS class that we use to provide basic styling to the element or button we may consider converting to a 3D animated button.

There are 12 CSS properties that we are using to style the basic button. We have set the position property to relative, applied 20 pixels of padding on top and bottom and 40 pixels of padding on the left and right side of the button. We have set the 10 pixels of margin on top and bottom and 20 pixels of margin on left and right. The padding and margin properties are helping us to set enough space around and inside the button to make it look appealing.

We have set the font size to 26 pixels using font-size property, font-weight property to 600, and aligned the text to Centre using text-align property. The decoration of the text is set to none with the help of text-decoration property. The background color of the button is set to blue shade with the help of background-color property. The text is set to white with the help of color property, and the border-radius is set to 7 pixels to make the corners of the button rounded.

With the help of box-shadow property, we have set the horizontal length or the offset-x to zero pixels. The vertical length or the offset-y is set to 12 pixels to enhance the 3D view with one pixel of blur radius. The shadow color is set to a darker blue shade than the one used in the background color of the button to further enhance the 3D view of the button. See the following image to understand the box Shadow property and its values.

Add Shadow to Gutenberg blocks in WordPress
Add Shadow to Gutenberg blocks in WordPress

Finally, we have the transition property, set to 0.2 seconds for all. The transition CSS property is a shorthand property for transition-property, transition-timing-function, transition-duration, and transition-delay. Transition property helps us define the transition between two states of an element with the help of pseudo-classes such as :hover or :active to kick in the transition when someone places the mouse over the element or the element is active.

Button Animation CSS Code

The following block of CSS code gets activated as soon as you place your mouse on the button element.

.blue-button:hover {
transform: translateY(4px);
box-shadow: 0px 5px 1px #0082b5;
}

Button Animation CSS Code Explanation

We make use of two CSS properties to animate the button when someone places their mouse over the button. The mouseover is detected using the pseudo-class as a postfix with the class name using the “:” symbol. For example: “.class-name:hover” where “class-name” is the name of the class and “:hover” is a pseudo-class.

The first property in our code is “transform” CSS property. With the help of transform CSS property, we can interact with the element by scaling or rotating it. Click here to learn more. With the help of the translateY() function in the value of the translate property, we are changing the position of the element vertically to 4 pixels.

With the help of box-shadow property, we have set the offset-X to 0 pixels and offset-Y to 5 pixels to make it appear as if it is pushed down when you place the mouse over the element. The blur radius is set to 1 pixel with the similar blue shade of shadow that we have used earlier for this button.

The following Animated 3D button is the result of the above CSS code.

Animated 3d Buttons for WordPress Gutenberg – Output

3D Button – MouseOver Me

3d Animated Button CSS Code for WordPress – Conclusion

Animated 3d Button CSS

If you decide to use this button on your WordPress website, you may copy the following code and apply the relevant class in the additional CSS classes for the element you desire to change into an animated 3D button.

Animated 3d Buttons for WordPress Gutenberg – Full CSS Code

.blue-button{
    position: relative;
    padding: 20px 40px;
    margin: 10px 20px;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 7px;
    transition: 0.2s all;
	background-color: #26ADE4;
	box-shadow: 0px 12px 1px #0082b5;
}

.blue-button:hover {
transform: translateY(4px);
box-shadow: 0px 5px 1px #0082b5;
}

Click here to learn how to apply custom CSS class in WordPress. Click here to learn where to put the custom CSS code in WordPress.

We hope you find this article 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 Support Agent with 15+ Years of exposure in Customer and Technical Support, Team Management, Training, and Knowledge Management. My engagement in a corporate environment and freelance projects has taught me to be highly 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.