Thursday, 21 April 2022

HTML + CSS #12 | Button & Link Styling | HTML & CSS | Web Development

 <!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>Document</title>
</head>
<style>
    #btn1{
       
        border: 2px solid black;
        padding: auto;
        border-radius: 5px;
        margin-top: 10px;
        color: rgb(0, 0, 0);
        cursor: pointer;
        background-color: chartreuse;
       
       
    }
    #btn2{
        border: 2px solid black;
        padding: 5px auto;
        border-radius: 5px;
        color: rgb(0, 0, 0);
        cursor: pointer;
        background-color:  red;
       
   
     
    }
 
    .btn:hover{
       color: blue;
       border: 3px dotted blueviolet;
    }


   
    a{
        font-size: 40px;
        text-decoration: none;
       

    }
    a:hover{
        color: chocolate;
    }
 
    a:visited{
        color: deeppink;
    }
   
    .text{
        font: bold;

    }
</style>
<body>
    <h1>FORM</h1>
    <form action="user.php">
        <div>
            <label for="name">Name:</label>
             <input type="text" name="myname" id="name">
        </div>
        <div>

            Age: <input type="number" name="myage">
        </div>
        <div>

            Gender: Male<input type="radio"> Female<input type="radio"> Other: <input type="radio">
        </div>
        <div>
            <label for="box">Are you 18+</label>
            <input type="checkbox" name="checkbox" id="box">
        </div>
        <div>
            Date:<input type="date" name="date" id="">
        </div>

        <div class="text">
                Submit <input id="btn1"  class="btn" type="submit" name="submit">
                Reset <input id="btn2" class="btn" type="reset" value="reset">
            </div>
         <a href="https://www.yahoo.com">Yahoo</a>  

           
     
       

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




No comments:

Post a Comment

JAVASCRIPT + CSS + HTML #42 | Event & Event Listener |How to Target using JS | Web Development

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...