Customizing Button Colors

The WP SMS plugin comes with several buttons for different functions like “Login with SMS” By default, these buttons have pre-set color styles. However, you can easily change the button colors to match your website’s branding or personal preference.

To customize the button colors, follow these simple steps:

1. Copy the Code Snippet

Copy the following code snippet:

function wp_sms_custom_login_css() {
    echo '<style type="text/css">
        button.wpsms-button,
        button.login-with-sms-btn,
        button.request-otp-button,
        button.verify-sms-otp {
            background: red !important;
            color: #fff !important;
        }
    </style>';
}
add_action('wp_head', 'wp_sms_custom_login_css');
add_action('login_head', 'wp_sms_custom_login_css');

2. Paste the Code

Paste the code snippet into your WordPress theme’s functions.php file or a site-specific plugin. This will ensure that the custom CSS styles are applied to your website.

3. Customize the Colors

In the code snippet, you’ll see two lines that set the button colors:

background: red !important; sets the background color of the buttons to red.
color: #fff !important; sets the text color of the buttons to white.

Replace red and #fff with the color codes of your choice. You can use hexadecimal color codes (e.g., #ff0000 for red, #000000 for black) or color names (e.g., blue, green).

After making the changes, save the file, and the new button colors will be applied to all the WP SMS plugin buttons on your website.

That’s it! You’ve successfully customized the button colors in the WP SMS plugin to match your website’s design or personal preferences.