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.



Gutenberg Button HTML is below.


Add CSS below as custom css.



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