Simple Buttons (part-2) Using HTML & CSS only


Hello wizards, Today in this blog you’ll learn how to create the Simple Buttons (part-2) using HTML & CSS only. Earlier I have shared a blog on Simple Buttons(part-1) and now its time to create a Simple Buttons (part-2)

In the video, you’ve seen "How to design the simple button (part-2) . As you know, this is a pure CSS program that means only HTML & CSS are used to create this button.

SOURCE CODE 

To create this Simple Button (part-2) . First, you need to create one file for HTML code and  CSS code is internally added in HTML file. After creating the file just paste the following codes in your file. Remember, you’ve to create a file with .html extension.

You can also download source code file from the given download button.

HTML
<!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>Button-2</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: grid;
            place-content: center;
            height: 100vh;
        }

        .btn {
            font-size: 18px;
            padding: 10px 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            background-color: slateblue;
            color: white;
            border: none;
            box-shadow: 4px 4px black;
            cursor: pointer;
        }

        .btn:active {
            position: relative;
            top: 4px;
            left: 4px;
            box-shadow: none;
        }
    </style>
</head>

<body>
    <button class="btn">Button</button>

</body>

</html>
You have to wait 15 seconds.

Generating Download Link...

Post a Comment

Previous Post Next Post