Rounded Buttons Through theme.json
Sets the shape, padding and weight of all buttons (Button block, search and form buttons) in a block theme through theme.json, including a darker hover color.
Opens WPIDE on
Code
// Button style.
$wpide_button = array(
'radius' => '999px',
'background' => '#111827',
'text' => '#ffffff',
'hover' => '#374151',
);
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_button ) {
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'styles' => array(
'elements' => array(
'button' => array(
'border' => array( 'radius' => $wpide_button['radius'] ),
'color' => array( 'background' => $wpide_button['background'], 'text' => $wpide_button['text'] ),
'spacing' => array( 'padding' => array( 'top' => '0.75em', 'bottom' => '0.75em', 'left' => '1.5em', 'right' => '1.5em' ) ),
'typography' => array( 'fontWeight' => '600' ),
':hover' => array( 'color' => array( 'background' => $wpide_button['hover'], 'text' => $wpide_button['text'] ) ),
),
),
),
) );
} );Notes
Set the radius to 4px for slightly rounded corners or 0 for square buttons.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.