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;

}

No comments:

Post a Comment

JavaScript Animated

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