Wednesday, 22 March 2023

Creating a LOG IN form by taking image in background

In this we are going to make a Log_In form in which login filling options will be in a transparent box. And you can add your own background image also. 

Note*:- TO change the background go inside the style tag. Inside style tag go to the body and in background-image change the address of the url , give the address of the image which you want to keep in your background. Now,your image will be display on background.

 CODE:- LOG_IN_FORM

LOG IN






Foget Password?
 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOG_IN_FORM</title>
    <style>
body{
    background-image: url('/images/flower.jpg');
    background-position-x: center;
    background-size: cover;
}
.container{
    text-align: center;
    padding: 28px ;
    margin-left: 30%;
    margin-right: 30%;
    background-color: rgb(238, 192, 234);
    border-radius: 20px;
    display: block;
    box-shadow: 0 15px 20px rgba(0,0,0,.2);
    opacity: 0.8;
}
.txt{
    background-color: rgba(223, 210, 227, 0.9);
    border-radius: 25px;
    opacity: 0.9;
    margin-left: 30%;
    margin-right: 30%;
    text-align: center;
    font-family:cursive;
    font-size:xx-large;
    
}
input[type=text] , input[type=password]
{
    width: 350px;   
    margin: 8px 0;
    padding: 12px 20px;   
    display: inline-block ;   
    border: 2px solid skyblue;
    border-radius: 9px;
    box-sizing: border-box ;
    
}
button{
    background-color: #c120ac;   
         width: 30%;  
         border-radius: 20px;
          color: black;   
          padding: 15px;   
          margin: 10px 0px;   
          border: none;   
          cursor: pointer;
}
button:hover{
    opacity: 0.7;
}
    </style>
</head>
<body>
    <h2 class="txt">
 LOG IN
    </h2>
    <form action="login.php">
        <div class="container">
            <label>Username</label> <br>
            <input type="text" name="username" placeholder="Enter Your Username" required> <br>
            <label >Password</label> <br>
            <input type="password" name="password" placeholder="Enter Your Password" required> <br>
            <button  type="submit">LOG IN</button>
            <button  type="reset">SIGN UP</button> <br>
            <a href="#">Foget Password?</a>

        </div>
    </form>
</body>
</html>

 OUTPUT:-The image in background is what I have selected in background you can choose your own it will be displayed like this only and you can change the colour of the box also inside the style tag in .txt and .container.

Friday, 17 March 2023

Fancy Hover Buttons in HTML using CSS

 In this we are going to add three types of hover button styles which will make your buttons very innovative and attractive.

1.Border Pop

2.Background Slide

3.Background Circle

 Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancy Buttons</title>
    <style>
        * ,*::before ,*::after{
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin: 0;
        }
        button{
            margin: 1rem;
        }
        .btn{
            background-color: var(--background-color);
            color: #222;
            padding: .5em 1em;
            border: none;
            outline: none;
            position: relative;
            cursor: pointer;

            --background-color: #E3E3E3;
            --border-size:2px;
            --accent-color: #0af;
        }
        .btn.btn-border-pop::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
            z-index: -1;
            border: var(--border-size) solid var(--background-color);
            transition: top,left,right,bottom,100ms ease-in-out;
        }
        .btn.btn-border-pop:hover::before,
        .btn.btn-border-pop:focus::before{
            top: calc(var(--border-size)* -2);
            left: calc(var(--border-size)* -2);
            right: calc(var(--border-size)* -2);
            bottom: calc(var(--border-size)* -2);
        }
        .btn.btn-background-slide::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--accent-color);
            z-index: -1;
            transition: transform 300ms ease-in-out;
            transform: scale(0);
            transform-origin: left;   
        }
        .btn.btn-background-slide:hover::before,
        .btn.btn-background-slide:focus::before{
        transform: scale(1);

        }

        .btn.btn-background-slide{
            z-index: 1;
            transition: color 300ms ease-in-out;
        }
        .btn.btn-background-slide:hover,
        .btn.btn-background-slide:focus{
            color: white;
        }
        .btn.btn-background-circle::before{
         content: "";
         position: absolute;
         top: 0;
         left:0;
         right:0;
         bottom: 0;
         z-index: -1;
         background-color: var(--background-color);
         border-radius: 50%;
         transition: transform 500ms ease-in-out;

         transform: scale(1.5);
        }
        .btn.btn-background-circle:hover::before,
        .btn.btn-background-circle:focus::before{
         transform:scale(0);
        }


        .btn.btn-background-circle{
            z-index:1;
            overflow: hidden;
            background-color: black;
            transition: color 500ms ease-in-out;
        }
        .btn.btn-background-circle:hover,
        .btn.btn-background-circle:focus{
              color: white;
        }

        .btn.btn-border-underline::before {
            content: "";
            color: brown;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: var(--border-size);
            background-color: var(--accent-color);
            transform: scaleX(0);
        }

    </style>
</head>
<body>
    <button class="btn btn-border-pop">Border Pop</button>
    <button class="btn btn-background-slide">Background Slide</button>
    <button class="btn btn-background-circle">Background Circle</button>
   
</body>
</html> 

Output:-

Codecademy Code Foundations

Popular Posts

Categories

Android (23) AngularJS (1) Assembly Language (2) Books (10) C (75) C# (12) C++ (81) Course (1) Data Strucures (4) Downloads (1) Engineering (13) flutter (1) FPL (17) Hadoop (1) HTML&CSS (40) IS (25) Java (89) Leet Code (4) Pandas (1) PHP (20) Projects (19) Python (401) R (69) Selenium Webdriver (2) Software (14) SQL (27)