Customize Button Colors

This guide shows how to customize the colors of WSMS buttons (Login with SMS, OTP buttons, etc.) to match your website’s branding.

Add Custom CSS

Add this code to your theme’s functions.php file or a custom plugin:

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

Customize Colors

Modify the CSS values to match your brand:

Property	Description	Example
background	Button background color	#0073aa, blue, rgb(0,115,170)
color	Button text color	#fff, white, #000000

Button Classes

Class	Used For
.wpsms-button	General WSMS buttons
.login-with-sms-btn	Login with SMS button
.request-otp-button	Request OTP button
.verify-sms-otp	Verify OTP button

Related

• 2FA & Login Settings - Configure SMS login options