Last updated on October 18, 2023

Divi button styling

Don’t know where to add this snippet? Read our guide: How to add code snippets.

Style Divi buttons with our code snippets.

The code snippet below demonstrates how to style a Divi button using custom CSS. This can be useful when you want to customize the appearance of a button in your Divi theme.

/* Add custom styles to Divi button */
.wpsnippets_divi-button {
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
}

/* Apply custom styles to Divi button */
.add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_styles' );
function wpsnippets_enqueue_styles() {
  wp_enqueue_style( 'wpsnippets-divi-button', get_stylesheet_directory_uri() . '/custom-styles.css' );
}

To use this code snippet, follow these steps:

  1. Create a new file named custom-styles.css in your child theme directory.
  2. Copy and paste the above CSS code into the custom-styles.css file.
  3. Save the file.
  4. Open your child theme’s functions.php file.
  5. Add the following code snippet to enqueue the custom CSS file:
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_styles' );
function wpsnippets_enqueue_styles() {
  wp_enqueue_style( 'wpsnippets-divi-button', get_stylesheet_directory_uri() . '/custom-styles.css' );
}
  1. Save the functions.php file.

Now, whenever you use the class wpsnippets_divi-button on a button element in your Divi theme, it will have the custom styles applied to it. You can modify the CSS code to suit your specific styling preferences.

Examples

Example 1: Customizing the Divi button style using CSS

This use case demonstrates how to customize the style of a Divi button by adding custom CSS code.

/* Custom CSS to style the Divi button */
.wpsnippets_custom_button {
    background-color: #ff0000;
    color: #ffffff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
}

In this example, the .wpsnippets_custom_button class is used to target the Divi button and apply custom styles. The CSS properties such as background-color, color, border-radius, padding, font-size, and text-decoration are used to customize the button’s appearance.

Example 2: Adding a custom class to a Divi button

This use case demonstrates how to add a custom class to a Divi button, which can then be used to apply custom styles.

/**
 * Add custom class to Divi button.
 */
function wpsnippets_add_custom_class_to_button( $atts ) {
    $atts['class'] .= ' wpsnippets_custom_button';
    return $atts;
}
add_filter( 'et_pb_module_shortcode_attributes', 'wpsnippets_add_custom_class_to_button' );

In this example, the wpsnippets_add_custom_class_to_button function is used to add the wpsnippets_custom_button class to the Divi button. The et_pb_module_shortcode_attributes filter hook is used to modify the button’s attributes and add the custom class.

Example 3: Changing the default Divi button style

This use case demonstrates how to change the default style of all Divi buttons on a website by modifying the theme’s stylesheet.

/* Custom CSS to change the default Divi button style */
.et_pb_promo_button {
    background-color: #ff0000;
    color: #ffffff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
}

In this example, the .et_pb_promo_button class is used to target all Divi buttons and apply custom styles. By adding this CSS code to the theme’s stylesheet, the default style of all Divi buttons will be changed.

Last updated on October 18, 2023. Originally posted on December 20, 2023.

Leave a Reply

Your email address will not be published. Required fields are marked *