Custom Wordpress Login Page

functions.php

/* place this code in your functions.php file */

/*=== LOGIN Page Functions Start ===*/

//Loads the login page css styles
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/login-styles.css" />';
}
add_action('login_head', 'custom_login');

//changes the logo url
function login_logo_url() {
    return 'https://hsnyc.co';
}
add_filter('login_headerurl', 'login_logo_url');

//changes the logo hover Text
function login_logo_text() {
    return 'HSNYC Web Design';
}
add_filter('login_headertitle', 'login_logo_text');
/*=== LOGIN Page Funtions End ===*/

login-styles.css

/* Modify paths and properties to match your styles. For this example I use a directory named 'login' and place this file in it. The directory 'images' is used to place the client's logo */
.login h1 a {
  width: 300px;
  height: 300px;
  background-image: url('images/client-logo_300x300.png');
  background-size: 300px 300px;
  background-repeat: no-repeat;
  padding-bottom: 10px;
}

body.login {
  background-color: #F2F2F2;
}

.wp-core-ui .button-primary {
    background: none repeat scroll 0 0 #656565;
    border-color: #b2b2b2;
    text-shadow: none;
    box-shadow: 0 1px 0 rgba(101, 101, 101, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #fff;
}

.wp-core-ui .button-primary:link {
    background: none repeat scroll 0 0 #656565;
    border-color: #b2b2b2;
    box-shadow: 0 1px 0 rgba(101, 101, 101, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #fff;
}


.wp-core-ui .button-primary:visited {
    background: none repeat scroll 0 0 #b2b2b2;
    border-color: #656565;
    box-shadow: 0 1px 0 rgba(101, 101, 101, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #000;
}


.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.hover {
    background: none repeat scroll 0 0 #b2b2b2;
    border-color: #656565;
    box-shadow: 0 1px 0 rgba(178, 178, 178, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #000;
}

.wp-core-ui .button-primary:active {
    background: none repeat scroll 0 0 #b2b2b2;
    border-color: #656565;
    box-shadow: 0 1px 0 rgba(178, 178, 178, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #000;
}

.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
    background: #b2b2b2;
    border-color: #656565;
    color: #000;
}

.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus,
.wp-core-ui .button-primary:hover {
    box-shadow: 0 1px 0 rgba(178, 178, 178, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
}

.login #login_error, .login .message {
    border-left: 4px solid #656565;
}