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:
- Create a new file named
custom-styles.css
in your child theme directory. - Copy and paste the above CSS code into the
custom-styles.css
file. - Save the file.
- Open your child theme’s
functions.php
file. - 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' );
}
- 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.