<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap CSS --> <link rel="stylesheet" href="Style/css/bootstrap.min.css"> <script src="Style/js/jquery.min.js"></script> <script src="Style/js/bootstrap.min.js"></script> <!--Use this Link For Hover CSS--> <link rel="stylesheet" href="Style/css/hover-min.css"> <!--Use this Link For Animate CSS --> <link rel="stylesheet" href="Style/css/animate.css"> </head> <div class="container-fluid animated bounceIn"> <div class="col-md-9 mx-auto mt-5 mb-5"> <div class="card border-danger shadow-lg shadow1"> <div class="card-header bg-danger border-danger text-light text-center text-uppercase text-monospace"> <h3 class="text-shadow">Login Form</h3> </div> <div class="card-body text-dark text-monospace"> <form> <div class="form-group"> <label for="email">Email Address</label> <input type="email" placeholder="Enter Your Email Address" class="form-control hvr-shadow" id="email" required> </div> <div class="form-group"> <label for="pass">Password</label> <input type="password" placeholder="Enter Accout Passoword" class="form-control hvr-shadow" id="pass" required> </div> <div class="form-group hvr-grow"> <input type="checkbox" required><label>Remember me</label> </div> <div class="text-center mt-4"> <input type="submit" value="Login" class="btn btn-outline-danger w-50 hvr-grow-shadow"> </div> <div class="text-center mt-3"> <a class="btn btn-link text-dark hvr-grow" href="Registration.html"> Register Here If You Don't Have Account? </a> </div> </form> </div> </div> </div> </div>

.text-shadow { text-shadow: 1px 2px 4px rgba(0, 0, 0, 25) } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } .hvr-shadow{ display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0,0,0,0); -webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-property:box-shadow; transition-property:box-shadow } .hvr-shadow:active,.hvr-shadow:focus,.hvr-shadow:hover{ box-shadow:0 10px 10px -10px rgba(0,0,0,.5) } .hvr-grow-shadow{ display:inline-block ;vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0,0,0,0); -webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-property:box-shadow,transform; transition-property:box-shadow,transform } .hvr-grow-shadow:active,.hvr-grow-shadow:focus,.hvr-grow-shadow:hover{ box-shadow:0 10px 10px -10px rgba(0,0,0,.5); -webkit-transform:scale(1.1); transform:scale(1.1) } .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .shadow1::before, .shadow1::after { content: ''; position: absolute; top: 80%; bottom: 13px; display: block; width: 50%; -webkit-box-shadow: 0 15px 15px rgb(37, 37, 37); box-shadow: 0 15px 15px rgb(37, 37, 37); z-index: -1; left: 10px; } .shadow1::before { background: transparent; right: 10px; left: auto; -webkit-transform: rotate(3deg); transform: rotate(3deg); } .shadow1::after { background: transparent; -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }