Add Custom CSS to Style Your WordPress Login Page

Code

<?php
/**
 * Enqueue custom CSS for the WordPress login page.
 *
 * This function adds custom styles to the WordPress login page.
 */
function wp_dudecom_custom_login_css() {
    // Use wp_enqueue_style to add custom CSS to the login page
    wp_enqueue_style( 'wp-dudecom-login-style', get_stylesheet_directory_uri() . '/custom-login-style.css' );
}
add_action( 'login_enqueue_scripts', 'wp_dudecom_custom_login_css' );

/**
 * Add inline CSS directly to the WordPress login page.
 *
 * This function allows you to add custom CSS styles directly within the PHP file.
 */
function wp_dudecom_custom_login_inline_css() {
    ?>
    <style type="text/css">
        /* Example: Change the background color of the login page */
        body.login {
            background-color: #f1f1f1;
        }

        /* Example: Customize the login form */
        #loginform {
            background-color: #ffffff;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
        }

        /* Example: Change the login button color */
        .wp-core-ui .button-primary {
            background-color: #0073aa;
            border-color: #0073aa;
            color: #ffffff;
            text-shadow: none;
        }

        /* Example: Change the login button hover color */
        .wp-core-ui .button-primary:hover {
            background-color: #005177;
            border-color: #005177;
        }
    </style>
    <?php
}
add_action( 'login_head', 'wp_dudecom_custom_login_inline_css' );
?>