The below buttons are created using the GenerateBlock block Buttons and also utilise GeneratePress’s Global Colors feature.
In the examples below the purple color use the global accent color, the white text and the white background uses the global base color. Changing these colors in the Theme customizer will update the color scheme of these buttons.
Buttons using the block settings
Basic Static Buttons – no hover effects – NO custom CSS required
The below buttons can be configured using the block settings. They require no additional CSS.
Standard buttons with no effects:
Buttons using the Box Shadow effect:
Single Effect Hover Buttons – NO custom CSS required
The below buttons can be configured using the block settings and utilize some common Button effects. They require no additional CSS.
Buttons that change color on hover:
Buttons that add the Box shadow effect on hover:
Buttons that add the Transform (scale) effect on hover:
Multi-effect Hover Buttons – NO Custom CSS required
The below buttons can be configured using the block settings and combine some common Button effects. They require no additional CSS.
Buttons that change color, add Box shadow, and Transform (scale) on hover:
Buttons using custom CSS
Glow on Hover Buttons – Custom CSS required
The below buttons can be configured using a combination of the block settings and custom CSS.
Buttons with a glow hover effect using the custom class np-btn-glow-on-hover. Note this requires our CSS framework package which is coming soon.
Icon & Text Divider Buttons – Custom CSS required
The below buttons can be configured using a combination of the block settings and custom CSS.
Buttons with a clear divider between the icon and the button text. Use the custom class np-btn-icon-to-text-static on all buttons. Those with the purple (accent) background use the custom class accent. Those with the white (base) background use the custom class base. If the icon is on the left use the custom class icon-left. If the icon is on the right use the custom class icon-right. Note this requires our CSS framework package which is coming soon.
Buttons with a clear divider between the icon and the button text that change color on hover. Use the custom class np-btn-icon-to-text-hover on all buttons. Those with the purple (accent) background use the custom class accent. Those with the white (base) background use the custom class base. If the icon is on the left use the custom class icon-left. If the icon is on the right use the custom class icon-right. Note this requires our CSS framework package which is coming soon.
Loading Bar Buttons – Custom CSS required
The below buttons can be configured using a combination of the block settings and custom CSS.
Buttons with the a “loading” animation. Use the custom class np-btn-loading. Note this requires our CSS framework package which is coming soon.
Beacon Animation Buttons – Custom CSS required
The below buttons can be configured using a combination of the block settings and custom CSS.
Buttons with the a “beacon” animation emitting from the button. Use the custom class np-btn-circle-beacon. Note this requires our CSS framework package which is coming soon.
Buttons with the a “beacon” animation emitting from the button on hover. Use the custom class np-btn-circle-beacon-hover . Note this requires our CSS framework package which is coming soon.
Arrow Animation Buttons – Custom CSS required
The below buttons can be configured using a combination of the block settings and custom CSS.
Buttons with the a arrow animation moving on the button. Use the custom class np-btn-hover-arrows. Note this requires our CSS framework package which is coming soon.