Sunday, October 31, 2021

Bordered Button Groups

 Bordered Button Groups Code

<!DOCTYPE html>

<html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

        <h1>Bordered Button Groups</h1>

        <div class="btn-groups">

            <button class="button">button</button>

            <button class="button">button</button>

            <button class="button">button</button>

            <button class="button">button</button>

        </div>

 </body>

</html>


CSS Bordered Button Groups Style Code

.btn-groups .button{

    background-color: green;

    border:1px solid green ;

    color: #fff;

    padding:15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

     font-size: 16px;

    cursor: pointer;

   float: left;

}

.btn-groups .button:not(.lastchild){

    border-right: none;

}

.btn-groups .button:hover{

    background-color: #3e8e41;

}

Saturday, October 30, 2021

Shadow Button

 Shadow Button Code

<!DOCTYPE html>

<html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

  <h1>Css Shadow Button</h1>

  <button class="button button1">Shadow button</button>

  <button class="button button2">Shadow button on hover</button>


 </body>

</html>


CSS Shadow Button Style

.button{

    background-color: green;

    border: none;

    color: #fff;

    padding:15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin:4px 2px ;

    cursor: pointer;

    -webkit-transition-duration:0.4s ;

    transition-duration:0.4s ;

}

.button1{

    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2)0 6px 20px 0 rgba(0,0,0,0.19) ;

}

.button2:hover{

    box-shadow:0px 12px 16px rgba(0,0,0,0.24)0 17px 5px 0 rgba(0,0,0,0.24)  ;

}

Disabled Button

Disabled Button Code

<!DOCTYPE html>

<html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <link rel="STYLESHEET"type="text/css"href="web.css">

        <title>web design</title>

    </head>

    <body>

       <button class="button">Nomal Boutton</button>

       <button class="button disable" >disable Boutton</button>


 </body>

</html>


CSS Disabled Button Style Code 

.button{

    background-color: green;

    border: none;

    color: #fff;

    padding:15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin:4px 2px;

    cursor: pointer;

}

.disable{

    opacity:0.6;

    cursor: not-allowed;

}

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...