Css Gradient Button Hover Effects Malti Example Github And Cordpen Type Download

0

M.b.patel June 14, 2021

Css Gradient Button Hover Effects Malti Example Github Download

Demo

<a href="#" class="myButton">blue</a>

  <!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>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            padding-top: 150px;
        }
        .buttonClass {
            font-size: 15px;
            font-family: Arial;
            border-width: 1px;
            color: #fff;
            font-weight: bold;
            border-radius: 8px;
        }

        .btn1{
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px #3d768a;
            background: linear-gradient(#ff00dd, #0804ff);
            padding: 10px;
            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);
        }
    
        .btn4{
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#000000, #00eeff);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

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

        .btn5:hover {
            background: linear-gradient(#000000, #ffc400);
        }
    
        .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">
        <a href="#" class="buttonClass btn1">Button text</a>
        <a href="#" class="buttonClass btn2">Button text</a>
        <a href="#" class="buttonClass btn3">Button text</a>
        <a href="#" class="buttonClass btn4">Button text</a>
        <a href="#" class="buttonClass btn5">Button text</a>
        <a href="#" class="buttonClass btn6">Button text</a>
        <a href="#" class="buttonClass btn7">Button text</a>
        <a href="#" class="buttonClass btn8">Button text</a>
        <a href="#" class="buttonClass btn9">Button text</a>
    </div>
</body>

</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>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            padding-top: 150px;
        }
        .buttonClass {
            font-size: 15px;
            font-family: Arial;
            border-width: 1px;
            color: #fff;
            font-weight: bold;
            border-radius: 8px;
        }

        .btn1{
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px #3d768a;
            background: linear-gradient(#ff00dd, #0804ff);
            padding: 10px;
            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);
        }
    
        .btn4{
            box-shadow: 0px 10px 14px -7px #276873;
            text-shadow: 0px 1px 0px hsl(196, 39%, 39%);
            background: linear-gradient(#000000, #00eeff);
            padding: 10px;
            margin: 20px;
            text-decoration: none;
        }

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

        .btn5:hover {
            background: linear-gradient(#000000, #ffc400);
        }
    
        .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">
        <a href="#" class="buttonClass btn1">Button text</a>
        <a href="#" class="buttonClass btn2">Button text</a>
        <a href="#" class="buttonClass btn3">Button text</a>
        <a href="#" class="buttonClass btn4">Button text</a>
        <a href="#" class="buttonClass btn5">Button text</a>
        <a href="#" class="buttonClass btn6">Button text</a>
        <a href="#" class="buttonClass btn7">Button text</a>
        <a href="#" class="buttonClass btn8">Button text</a>
        <a href="#" class="buttonClass btn9">Button text</a>
    </div>
</body>

</html>

Hover
CSS Buttons
Css Hover
Hover Css
Hover In Css
On Hover Css
Css Effects Hover
Css Hover Effects
Hover Css Effects
Hover Effect Css
Hover Effects Css
Button Css Style
Button Style Css

How To Use This Cord

steps

Fast One Copy Html File.
Copy CSS File And Past Head Part Top Fo Html File.
File Save Name.html
Ran Html File
Ready To Use

Tags

Button Cordpen css freedownload Github Gradient GradientButton HoverEffects html SimpleExample template web-beast.com

Newer
Older

Post a Comment

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