Customize Gutenberg Button Style in WordPress 5.0 [Code and Sample Attached]

From wordpress 5.0, new visual editor called Gutenberg Editor will be installed as default visual editor of wordpress. (It can be available by activating Gutenberg plugin in wordpress 4.9.) And it can make us add button block from visual editor. Here, we will explain how to customize default button style.

Next: Add Parallax Effect to Background Image Added by Gutenberg Editor[Code and Sample Attached]

Default Button

Gutenberg default button design is like below.

Customized Button

Check customized button style in Codepen.

Explanation

HTML

Gutenberg Button HTML is below.

CSS

Add CSS below as custom css.

 

Summary

It’s very easy to customize default design. Please override .wp-block-button .wp-block-button__link and .wp-block-button .wp-block-button__link:hover to make your own button!

Latest Posts