How to design button using css | Button Hover Effect | CodeWithNizami

Dear friends in this article we will tell you How to design button using css. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.

How to design Button

Step 1

Friends, in this article we will tell you how to design a button using css as well as how to apply hover effects on it.

So let’s know that first of all you have to take any one code editor in which we can write the code, after that you have to select the new file in that code editor then shift + ! After this, you have to enter die so that the syntax of html becomes automatically. Then we have to take a class in that class, inside that class we have to take the button thrice and then give any class to all those buttons so that when we apply css then we will be able to target the button easily and make the best button using css.

HTML Code.

<div class="all-btn">
    <button class="btn-one">ONE BUTTON</button>
    <button class="btn-two">TWO BUTTON</button>
    <button class="btn-three">THREE BUTTON</button>
</div>

Step 2

Now we have to write the code of css and we will write the code of css in the same file of html so that we don’t have to create a separate file if you also want to write the code of css in the same file of html then inside the head section you have to take style tag You can write the code of css and if you want to write the code of css separately by creating a new file, then you have to create a new file and import that file in the link tag inside the head section in the html file. So that we can use the css file for this button using css.

CSS Code.

body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: rgba(22, 22, 22, 0.877);
        }
        .all-btn button{
            padding: 10px 20px;
            border: none;
            outline: none;
            border-radius: 5px;
            font-family: sans-serif;
            letter-spacing: 2px;
        }
        .all-btn .btn-one{
            background-color: aqua;
            color: black;
            font-weight: bold;
            border: 2px solid rgb(233, 233, 233);
            transition: all 0.4s;
        }
        .all-btn .btn-one:hover{
            background: none;
            border: 2px solid aqua;
            color: rgb(255, 255, 255);
            font-weight: bold;
            box-shadow: 0 0 10px aqua;
        }
        .all-btn .btn-two{
            background-color: rgb(255, 0, 128);
            color: black;
            font-weight: bold;
            margin-left: 10px;
            border: 2px solid rgb(233, 233, 233);
            transition: all 0.4s;
        }
        .all-btn .btn-two:hover{
            background: none;
            border: 2px solid rgb(255, 0, 128);
            color: rgb(255, 255, 255);
            font-weight: bold;
            box-shadow: 0 0 10px rgb(255, 0, 128);
        }
        .all-btn .btn-three{
            background-color: rgb(251, 255, 0);
            color: black;
            font-weight: bold;
            margin-left: 10px;
            border: 2px solid rgb(233, 233, 233);
            transition: all 0.4s;
        }
        .all-btn .btn-three:hover{
            background: none;
            border: 2px solid rgb(251, 255, 0);
            color: rgb(255, 255, 255);
            font-weight: bold;
            box-shadow: 0 0 10px rgb(251, 255, 0);
        }

1. How to create portfolio website using html css and javascript with dark and light mode?

2. How to design tea cup with vapour effcts using css?

3. How to make neumorphism clock using html css and javascript?

4. How to create traffic lights using javascript?

Watch video related this article