Learn how to turn a plain Gutenberg button block into an fully animated button with Fontawesome Icons.
You'll learn how to:
• Register a custom button style
• Add Fontawesome to your site
• Create an :after pseudo-element
• Insert an icon in the pseudo-element
• Animate the icon on hover
• Add a color-change effect on hover
• Style the default Gutenberg button without over-riding inline styles
******************************
Video Chapters
******************************
0:00 - Intro
0:25 - How to register a custom Gutenberg button style
4:35 - Where to put custom CSS code
5:04 - HTML structure of the button block
6:20 - Customizing the button (basic styles)
7:52 - Add a pseudo-element to the Button
8:46 - Install Fontawesome icons (plugin)
9:25 - Add icon to the button
11:00 - Hover effect for button & icon
14:30 - More hover animations
19:27 - Styling the Default button block
21:21 - Thanks! (Don't forget to subscribe)
PHP Code Snippet to register a Button Styles
_______________________________________________________________________
It turns out KZfaq blocks one of the characters required to add the php snippet here, so instead you can find it at this link:
pastebin.com/9wM0CFVF
________________________________________________________________________
Snippet instructions: change the button slug and label to whatever you want. You can leave 'textdomain' as is, or rename it to whatever you want. It's for adding multi-language support inside a plugin so isn't needed. Add the code inside your theme's functions.php or the Code Snippets plugin.