Hi in this tutorial we gonna learn how to login securely in PHP this is a different type of login functionality you can protect the page and only the admin can register a new user and the admin give a username password to login so let's write a code and understand it. 






We need two tables of database one is accounts and another is auth_admin. see the database structure below 


Database structure

-- phpMyAdmin SQL Dump
-- version 5.0.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 07, 2021 at 05:13 AM
-- Server version: 10.4.17-MariaDB
-- PHP Version: 7.4.14

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `phplogin`
--

-- --------------------------------------------------------

--
-- Table structure for table `accounts`
--

CREATE TABLE `accounts` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  `non_enc_pass` varchar(300) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `accounts`
--

INSERT INTO `accounts` (`id`, `username`, `password`, `email`, `non_enc_pass`) VALUES
(7, 'rathorji', '$2y$10$1sNJ9S0reHWeNKOyyuJUL.AQFsSl/CHnd1rfg.k1aouB0xTwLCmuK', 'gajanand.kgn@gmail.com', 'rathorji'),
(8, 'orchid', '$2y$10$yR8g/XeBYwKmsEueVC/YM.4sXBrvBmHpH4Os0zDF34h0fLFIlekcy', 'orchid@gmail.com', 'test'),
(9, 'mandal', '$2y$10$D0uSJYP7eDCwEGAJcb9vP.5uSUD6XisgZnlgdAWkzdlYBMtTjKhwK', 'mandal@gmail.com', 'test'),
(10, 'rakesh', '$2y$10$Ml8x9ab5LknGGZU62d13Ee.gAJDvEqixJbtA6mAkYkad9baKhGi5e', 'rakesh@gmail.com', 'rakesh'),
(11, 'dummy', '$2y$10$TzU8Kf0AF1SmndEsK7JF.ObKLlJQkVw0GQ1ABbXZOXn0gvhBFJy1O', 'dummy@gmail.com', 'dummmyuser'),
(12, 'test', '$2y$10$awtJ2zGEhsow7.Nd0NtTMeUsPXfQnMc3rvNX1NtCkp6SVzdHhF8cS', 'test@gmail.com', 'test'),
(13, 'another', '$2y$10$BQQWkCw0mpSZVLwukB81ruQcJMJi9rw2vxj3XQ730TdNPXWYHNI7i', 'another@gmail.com', 'another'),
(14, 'website', '$2y$10$mVUYVH6pYsBpOHyYG7u71eZvXGMZvwuhSrWkE27mbo0uocTuEQ5xG', 'website@gmail.com', 'test'),
(15, 'testing_user', '$2y$10$HyRH.K0YfhKd/91lyb5GAetOcTd/z6UDsTBxkOSDB2Y4U6XNgwsRu', 'testing@gmail.com', 'aohter password'),
(16, 'stint', '$2y$10$1SYcPy5t8C9sURcJZSlrlewrARwRRifWbAGQeZMcPLg6UU.xEgCfq', 'gajanand.kgn@rediffmail.com', 'stint');

-- --------------------------------------------------------

--
-- Table structure for table `auth_admin`
--

CREATE TABLE `auth_admin` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `auth_admin`
--

INSERT INTO `auth_admin` (`id`, `username`, `password`, `email`) VALUES
(1, 'test', '$2y$10$SfhYIDtn.iOuCW7zfoFLuuZHX6lja4lF4XA4JqNmpiH/.P3zB8JCa', 'test@test.com');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `accounts`
--
ALTER TABLE `accounts`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `auth_admin`
--
ALTER TABLE `auth_admin`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `accounts`
--
ALTER TABLE `accounts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=17;

--
-- AUTO_INCREMENT for table `auth_admin`
--
ALTER TABLE `auth_admin`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;



First look at the project structure 

php-app/
┣ admin/
┃ ┣ assets/
┃ ┃ ┗ img/
┃ ┃ ┗ body-bg.jpg
┃ ┣ all_users.php
┃ ┣ create_user.php
┃ ┣ footer.php
┃ ┣ header.php
┃ ┣ home.php
┃ ┣ index.php
┃ ┣ logout.php
┃ ┣ proccess_new_user.php
┃ ┣ process_login.php
┃ ┗ style.css
┣ assets/
┃ ┗ img/
┃ ┗ body-bg.jpg
┣ comman/
┃ ┗ authenticate.php
┣ authenticate.php
┣ home.php
┣ index.php
┣ logout.php
┣ phplogin.sql
┣ process_login.php
┗ style.css


Admin Login

Admin can login and new user and send username and password to anyone so they can login to user 

see the project structure all, I am doing inside admin directory


header.php

<?php
// We need to use sessions, so you should always start sessions using the below code.
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
    header('Location: index.php');
    exit;
}
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet">
        <style>

            body{
                margin: 0;
                padding: 0;
            }

            .navtop {
                background-color: #1e2833;
                height: 60px;
                width: 100%;
                border: 0;
            }
            .navtop div {
                display: flex;
                margin: 0 auto;
                width: 1000px;
                height: 100%;
            }
            .navtop div h1, .navtop div a {
                display: inline-flex;
                align-items: center;
            }
            .navtop div h1 {
                flex: 1;
                font-size: 24px;
                padding: 0;
                margin: 0;
                color: #eaebed;
                font-weight: normal;
            }
            .navtop div a {
                padding: 0 20px;
                text-decoration: none;
                color: #c1c4c8;
                font-weight: bold;
            }
            .navtop div a i {
                padding: 2px 8px 0 0;
            }
            .navtop div a:hover {
                color: #eaebed;
            }
            body.loggedin {
                background-color: #f3f4f7;
            }
            .content {
                width: 1000px;
                margin: 0 auto;
            }
            .content h2 {
                margin: 0;
                padding: 25px 0;
                font-size: 22px;
                border-bottom: 1px solid #e0e0e3;
                color: #4a536e;
            }
            .content > p, .content > div {
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
                margin: 25px 0;
                padding: 25px;
                background-color: #fff;
            }
            .content > p table td, .content > div table td {
                padding: 5px;
            }
            .content > p table td:first-child, .content > div table td:first-child {
                font-weight: bold;
                color: #4a536e;
                padding-right: 15px;
            }
            .content > div p {
                padding: 5px;
                margin: 0 0 10px 0;
            }
            
            .error{
                color: red!important;
            }
        </style>
    </head>
    <body class="loggedin">
        <nav class="navtop">
            <div>
                <h1>Website Title</h1>
                <a href="all_users.php"><i class="fas fa-user-circle"></i>All Users</a>
                <a href="create_user.php"><i class="fas fa-user-circle"></i>Create User</a>
                <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
            </div>
        </nav>
        <div class="content">



footer.php


  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
  <script>
  $('#table-users').dataTable();
  </script>
    </body>
</html>



index.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="login-dark">
        <form method="post" action="process_login.php">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group"><input class="form-control" type="text" name="username" placeholder="Email"></div>
            <div class="form-group"><input class="form-control" type="password" name="password" placeholder="Password"></div>
            <div class="form-group"><button class="btn btn-primary btn-block" type="submit">Log In</button></div><a href="#" class="forgot">Forgot your email or password?</a></form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>


home.php

<?php include '../comman/authenticate.php'; ?>
<?php include_once './header.php'; ?>
<h2>Home Page</h2>
<p>Welcome back, <?= $_SESSION['name'] ?>!</p>
<?php include_once './footer.php'; ?>


process_login.php

<?php

include '../comman/authenticate.php';

// Now we check if the data from the login form was submitted, isset() will check if the data exists.
if (!isset($_POST['username'], $_POST['password'])) {
    // Could not get the data that should have been sent.
    exit('Please fill both the username and password fields!');
}

// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM auth_admin WHERE username = ?')) {
    // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
    $stmt->bind_param('s', $_POST['username']);
    $stmt->execute();
    // Store the result so we can check if the account exists in the database.
    $stmt->store_result();
    if ($stmt->num_rows > 0) {
        $stmt->bind_result($id, $password);
        $stmt->fetch();
        // Account exists, now we verify the password.
        // Note: remember to use password_hash in your registration file to store the hashed passwords.
        if (password_verify($_POST['password'], $password)) {
            // Verification success! User has logged-in!
            // Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
            session_regenerate_id();
            $_SESSION['loggedin'] = TRUE;
            $_SESSION['name'] = $_POST['username'];
            $_SESSION['id'] = $id;
            header('Location: home.php');
        } else {
            // Incorrect password
            echo 'Incorrect username and/or password!';
        }
    } else {
        // Incorrect username
        echo 'Incorrect username and/or password!';
    }


    $stmt->close();
}


logout.php

<?php
session_start();
session_destroy();
// Redirect to the login page:
header('Location: index.php');
?>



create_user.php

<?php include '../comman/authenticate.php'; ?>
<?php include_once './header.php'; ?>
<h2>Add New user</h2>
<form accept-charset="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">


    <?php
    $nameErr = $emailErr = $passwordErr = "";
    $username = $email = $password = "";

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        if (empty($_POST["username"])) {
            $nameErr = "Name is required";
        } else {
            $username = test_input($_POST["username"]);
        }

        if (empty($_POST["email"])) {
            $emailErr = "Email is required";
        } else {
            $email = test_input($_POST["email"]);
            // check if e-mail address is well-formed
            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                $emailErr = "Invalid email format";
            }
        }

        if (empty($_POST["password"])) {
            $passwordErr = "Password is required";
        } else {
            $password = test_input($_POST["password"]);
        }




        $sql = "SELECT * FROM accounts WHERE username = '$username'";
        $email_sql = "SELECT * FROM accounts WHERE email = '$email'";
        $result = $con->query($sql);
        $check_email_result = $con->query($email_sql);

        if ($result->num_rows > 0) {
            $nameErr = "Username already exists";
        } else if ($check_email_result->num_rows > 0) {
            $emailErr = "Email already exists";
        } else {
            //insert data;
            $ency_pass = password_hash($password, PASSWORD_DEFAULT);
            $sql = "INSERT INTO accounts (username, password, email,non_enc_pass) VALUES ('$username', '$ency_pass', '$email','$password')";

            if ($con->query($sql) === TRUE) {
                ?>
                <div class="alert alert-primary" role="alert">
                    <?php  echo "New user created successfully";?>
                </div>   
                <?php
               
            } else {
                echo "Error: <br>" . $con->error;
            }
        }
    }

    function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    ?>




    <div class="form-group">
        <label for="username">Username*</label>
        <input type="text" class="form-control" name="username" placeholder="Username" value="<?php echo $username; ?>">
        <small  class = "error form-text text-muted"> <?php echo $nameErr; ?></small >
    </div>


    <div class="form-group">
        <label for="email">Email address*</label>
        <input type="email" class="form-control" name="email" placeholder="Enter email" value="<?php echo $email; ?>">
        <small  class = "error form-text text-muted"> <?php echo $emailErr; ?></small >
    </div>
    <div class="form-group">
        <label for="password">Password*</label>
        <input type="password" class="form-control" name="password" placeholder="Password">
        <small  class = "error form-text text-muted"> <?php echo $passwordErr; ?></small >
    </div>
    <button type="submit" class="btn btn-dark">Create Now</button>
</form>

<?php include_once './footer.php'; ?>



all_users.php

<?php include '../comman/authenticate.php'; ?>
<?php include_once './header.php'; ?>
<h2>All Users</h2>


<table class="table" id="table-users">
    <thead class="thead-dark">
        <tr>
            <th scope="col">Username</th>
            <th scope="col">Email</th>
            <th scope="col">Password</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $sql = "SELECT * FROM accounts";
        $result = $con->query($sql);

        if ($result->num_rows > 0) {
            // output data of each row
            while ($row = $result->fetch_assoc()) {
                ?>
                <tr>
                    <td><?php echo $row['username']; ?></td>
                    <td><?php echo $row['email']; ?></td>
                    <td><?php echo $row['non_enc_pass']; ?></td>
                </tr>
                <?php
            }
        } else {
            echo "0 results";
        }
        ?>
    </tbody>
</table>


<?php include_once './footer.php'; ?>



style.css

body{
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background:#475d62 url(assets/img/body-bg.jpg);
}

.login-dark {

}

.login-dark form {
    max-width:320px;
    width:90%;
    background-color:#1e2833;
    padding:40px;
    border-radius:4px;
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
    color:#fff;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
}

.login-dark .illustration {
    text-align:center;
    padding:15px 0 20px;
    font-size:100px;
    color:#2980ef;
}

.login-dark form .form-control {
    background:none;
    border:none;
    border-bottom:1px solid #434a52;
    border-radius:0;
    box-shadow:none;
    outline:none;
    color:inherit;
}

.login-dark form .btn-primary {
    background:#214a80;
    border:none;
    border-radius:4px;
    padding:11px;
    box-shadow:none;
    margin-top:26px;
    text-shadow:none;
    outline:none;
}

.login-dark form .btn-primary:hover, .login-dark form .btn-primary:active {
    background:#214a80;
    outline:none;
}

.login-dark form .forgot {
    display:block;
    text-align:center;
    font-size:12px;
    color:#6f7a85;
    opacity:0.9;
    text-decoration:none;
}

.login-dark form .forgot:hover, .login-dark form .forgot:active {
    opacity:1;
    text-decoration:none;
}

.login-dark form .btn-primary:active {
    transform:translateY(1px);
}



Private User Login

If admin username and password send then you can login.


comman/authenticate.php

<?php

session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = new mysqli($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
    // If there is an error with the connection, stop the script and display the error.
    exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}


index.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="login-dark">
        <form method="post" action="process_login.php">
            <h2 class="sr-only">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group"><input class="form-control" type="text" name="username" placeholder="Username"></div>
            <div class="form-group"><input class="form-control" type="password" name="password" placeholder="Password"></div>
            <div class="form-group"><button class="btn btn-primary btn-block" type="submit">Log In</button></div><a href="#" class="forgot">Forgot your email or password?</a></form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>


home.php

<?php
// We need to use sessions, so you should always start sessions using the below code.
session_start();
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
    header('Location: index.php');
    exit;
}
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home Page</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <style>
            
            body{
                margin: 0;
                padding: 0;
            }
            
            .navtop {
                background-color: #1e2833;
                height: 60px;
                width: 100%;
                border: 0;
            }
            .navtop div {
                display: flex;
                margin: 0 auto;
                width: 1000px;
                height: 100%;
            }
            .navtop div h1, .navtop div a {
                display: inline-flex;
                align-items: center;
            }
            .navtop div h1 {
                flex: 1;
                font-size: 24px;
                padding: 0;
                margin: 0;
                color: #eaebed;
                font-weight: normal;
            }
            .navtop div a {
                padding: 0 20px;
                text-decoration: none;
                color: #c1c4c8;
                font-weight: bold;
            }
            .navtop div a i {
                padding: 2px 8px 0 0;
            }
            .navtop div a:hover {
                color: #eaebed;
            }
            body.loggedin {
                background-color: #f3f4f7;
            }
            .content {
                width: 1000px;
                margin: 0 auto;
            }
            .content h2 {
                margin: 0;
                padding: 25px 0;
                font-size: 22px;
                border-bottom: 1px solid #e0e0e3;
                color: #4a536e;
            }
            .content > p, .content > div {
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
                margin: 25px 0;
                padding: 25px;
                background-color: #fff;
            }
            .content > p table td, .content > div table td {
                padding: 5px;
            }
            .content > p table td:first-child, .content > div table td:first-child {
                font-weight: bold;
                color: #4a536e;
                padding-right: 15px;
            }
            .content > div p {
                padding: 5px;
                margin: 0 0 10px 0;
            }
        </style>
    </head>
    <body class="loggedin">
        <nav class="navtop">
            <div>
                <h1>Website Title</h1>
                <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
            </div>
        </nav>
        <div class="content">
            <h2>Home Page</h2>
            <p>Welcome back, <?= $_SESSION['name'] ?>!</p>
        </div>
    </body>
</html>


process_login.php

<?php

include './authenticate.php';

// Now we check if the data from the login form was submitted, isset() will check if the data exists.
if (!isset($_POST['username'], $_POST['password'])) {
    // Could not get the data that should have been sent.
    exit('Please fill both the username and password fields!');
}

// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
    // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
    $stmt->bind_param('s', $_POST['username']);
    $stmt->execute();
    // Store the result so we can check if the account exists in the database.
    $stmt->store_result();
    if ($stmt->num_rows > 0) {
        $stmt->bind_result($id, $password);
        $stmt->fetch();
        // Account exists, now we verify the password.
        // Note: remember to use password_hash in your registration file to store the hashed passwords.
        if (password_verify($_POST['password'], $password)) {
            // Verification success! User has logged-in!
            // Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
            session_regenerate_id();
            $_SESSION['loggedin'] = TRUE;
            $_SESSION['name'] = $_POST['username'];
            $_SESSION['id'] = $id;
            header('Location: home.php');
        } else {
            // Incorrect password
            echo 'Incorrect username and/or password!';
        }
    } else {
        // Incorrect username
        echo 'Incorrect username and/or password!';
    }


    $stmt->close();
}


logout.php

<?php
session_start();
session_destroy();
// Redirect to the login page:
header('Location: index.php');
?>


style.css

body{
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background:#475d62 url(assets/img/body-bg.jpg);
}

.login-dark {

}

.login-dark form {
    max-width:320px;
    width:90%;
    background-color:#1e2833;
    padding:40px;
    border-radius:4px;
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
    color:#fff;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
}

.login-dark .illustration {
    text-align:center;
    padding:15px 0 20px;
    font-size:100px;
    color:#2980ef;
}

.login-dark form .form-control {
    background:none;
    border:none;
    border-bottom:1px solid #434a52;
    border-radius:0;
    box-shadow:none;
    outline:none;
    color:inherit;
}

.login-dark form .btn-primary {
    background:#214a80;
    border:none;
    border-radius:4px;
    padding:11px;
    box-shadow:none;
    margin-top:26px;
    text-shadow:none;
    outline:none;
}

.login-dark form .btn-primary:hover, .login-dark form .btn-primary:active {
    background:#214a80;
    outline:none;
}

.login-dark form .forgot {
    display:block;
    text-align:center;
    font-size:12px;
    color:#6f7a85;
    opacity:0.9;
    text-decoration:none;
}

.login-dark form .forgot:hover, .login-dark form .forgot:active {
    opacity:1;
    text-decoration:none;
}

.login-dark form .btn-primary:active {
    transform:translateY(1px);
}


Note: If above example not work you can download zip file of source code.
Thanks. May this example help you



Are you facing problems in understanding this article?
You can watch the video. Watch it now