Splash Media Group

Buttons

Assorted Custom Buttons

Generally, buttons tend to take the form of a square, sometimes with rounded corners, or “pill” shaped, with a text that describes, to visitors, what it does. Here you’ll find a large collection of buttons that escape that basic look.

Position Aware Button

This is a very custom button. Unfortunately, this advanced button animation cannot be done by simple styling the basic WordPress buttons.

In order to style your buttons like this, you need to add custom CSS, as well as JavaScript, using the jQuery library. Then, the button itself needs to be an HTML block.

Position Aware

HTML HOT Button

Inspired by Staples, this button was built using standard HTML and CSS. In the page editor, it’s implemented using a standard WordPress HTML Block.

The text within this button is actually an SVG so additional code has been implemented to made it accessible.

Confetti Buttons

This animation is built using the functions.php file to inject CSS and JavaScript in-line. This animation is built to trigger on all default WordPress buttons, but it can be adjusted to be triggered by adding a class to any default WordPress button.

Button #1

Button #2

Button #3

Glowing Button

This button design is done with CSS only. It’s a very simple button design that brings color and a modern feel to a website.

Glowing Button

CSS Buttons Where Corners Draw In

These buttons are animated purely with CSS. By adding the class “btn-corners-in” to the basic WordPress button blocks displayed below, these styles are activated.

Hover Me

CSS Buttons from Calibre Industrial Group

This button style is animated using CSS and built using standard Kadence Advanced Button Block

Lorem Ipsum Dolor

CSS Buttons That Fill In

Left to Right
This button style is animated using CSS and built using standard WordPress Button blocks. This button style is easy and safe for almost any scenario. All you have to do is copy over the styles and apply the required CSS classes.

Test Button

Another test

Hey There

Bottom to Top
This button style is animated using CSS and built using standard WordPress Button blocks. This button style is easy and safe for almost any scenario. All you have to do is copy over the styles and apply the required CSS classes.

Test Button

Another test

Hey There

Jepson Petroleum

This button style is animated using CSS and built using standard WordPress Button blocks. This button style is easy and safe for almost any scenario. All you have to do is copy over the styles and apply the required CSS classes.

Test Button

Another test

Hey There

TIWW & Tornado Tech

Test Button

Another test

Hey There

Diagonal Split

This button is built using only custom CSS and the default WP Button Block.

Use This Button

Try This One Next

Diagonal Fill-In

This button is built using only custom CSS and the default WP Button Block.

Testing Button Here

Another Testing Button Here

Hazard Stripes

This button is built using only custom CSS and the default WP Button Block.

Use This Button

Try This One Next

“X” on Hover

This button is also animated using CSS and built using Custom HTML Blocks. When using this button style, you must ensure there is enough margin top and bottom to accommodate the rotation. Best used over an image.

LAYERED X