Css Button Hover Effects | Simple Button Hover Effects Codepen Type

CSS Button Hover Effects 

Simple Button Hover Effects Codepen Type





 


 




<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML VS CSS</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    <style>
        body {
            padding: 0;
            margin: 0;
            padding-top: 150px;
        }

        H1 {
            text-align: center;
            padding-bottom: 50PX;
            font-size: 50PX;
        }

        .buttonClass {
            font-size: 15px;
            font-family: Arial;
            border-width: 1px;
            color: #fff;
            font-weight: bold;

        }

        .hvc {
            padding-right: 20px;
        }

        .btn1 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px #3d768a;
            background: linear-gradient(#ff00dd, #0804ff);
            padding: 12px;
            margin: 20px;
            text-decoration: none;
        }

        .btn1:hover {
            background: linear-gradient(#002fff, #ff00ea);
        }

        .btn2 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#ffee00, #00eeff);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

        .btn2:hover {
            background: linear-gradient(#00eeff, #ffee00);
        }

        .btn3 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#00ffbf, #132a2c);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

        .btn3:hover {
            background: linear-gradient(#132a2c, #00ffbf);
        }




        .btn6 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#b700ff, #ff0095);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

        .btn6:hover {
            background: linear-gradient(#ff0095, #b700ff);
        }

        .btn7 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#ffffff, #00eeff);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

        .btn7:hover {
            background: linear-gradient(#00eeff, #ffffff);
        }

        .btn8 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#ff0077, #00a508);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

        .btn8:hover {
            background: linear-gradient(#00a508, #ff0077);
        }

        .btn9 {
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#12337c, #ff0000);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

        .btn9:hover {
            background: linear-gradient(#ff0000, #12337c);
        }
    </style>
</head>

<body>
    <div class="box">
        <H1>HTML VS CSS</H1>
        <a href="#" class="buttonClass btn9"><i class="fab fa-asymmetrik hvc"></i>Button text</a>
        <a href="#" class="buttonClass btn2"><i class="fas fa-ambulance hvc"></i> Button text</a>
        <a href="#" class="buttonClass btn1"><i class="fab fa-amazon-pay hvc"></i>Button text</a>
        <a href="#" class="buttonClass btn3"><i class="fab fa-android hvc"></i>Button text</a>
        <a href="#" class="buttonClass btn6"><i class="fab fa-angular hvc"></i>Button text</a>
        <a href="#" class="buttonClass btn7"><i class="fab fa-apple-pay hvc"></i>Button text</a>
        <a href="#" class="buttonClass btn8"><i class="fas fa-archway hvc"></i>Button text</a>
    </div>
</body>

</html>



Button 1 lien CSS



How To Use This Cord

steps
  1. Fast One Copy Html File.
  2. Copy CSS File And Past Head Part Top Fo Html File.  
  3. File Save Name.html
  4. Ran Html File 
  5. Ready To Use

Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.