Pure CSS Button Hover Effects | simple button hover effects codepen Type

0

M.b.patel June 12, 2021

  
  <!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>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
        }

        body {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: center;
        }

      

        .btn {
            box-sizing: border-box;
            appearance: none;
            background-color: transparent;
            border: 2px solid #ff1900;
            border-radius: 0.6em;
            color: #ff1900;
            cursor: pointer;
            display: flex;
            align-self: center;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1;
            margin: 20px;
            padding: 1.2em 2.8em;
            text-decoration: none;
            text-align: center;
            text-transform: uppercase;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

        .btn:hover,
        .btn:focus {
            color: #fff;
            outline: 0;
        }

        .first {
            transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
        }

        .first:hover {
            box-shadow: 0 0 40px 40px #ff1900 inset;
        }

        .second {
            border-radius: 3em;
            border-color: #1abc9c;
            color: #fff;
            background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
            background-position: 0 0;
            background-size: 100%;
            transition: background 300ms ease-in-out;
        }

        .second:hover {
            background-position: 100px;
        }

        .third {
            border-color: #5900ff;
            color: #fff;
            box-shadow: 0 0 40px 40px #2f00ff inset, 0 0 0 0 #1100ff;
            transition: all 150ms ease-in-out;
        }

        .third:hover {
            box-shadow: 0 0 10px 0 #0011ff inset, 0 0 10px 4px #2f00ff;
        }

        .fourth {
            border-color: #f1c40f;
            color: #fff;
            background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
            background-position: 100%;
            background-size: 400%;
            transition: background 300ms ease-in-out;
        }

        .fourth:hover {
            background-position: 0;
        }

        .fifth {
            border-color: #8e44ad;
            border-radius: 0;
            color: #8e44ad;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: color 150ms ease-in-out;
        }

        .fifth:after {
            content: '';
            position: absolute;
            display: block;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 100%;
            background: #8e44ad;
            z-index: -1;
            transition: width 150ms ease-in-out;
        }

        .fifth:hover {
            color: #fff;
        }

        .fifth:hover:after {
            width: 110%;
        }

        .sixth {
            border-radius: 3em;
            border-color: #2ecc71;
            color: #000000;
            background-image: linear-gradient(to bottom, transparent 14%, #2ecc71 67%);
            background-position: 0% 0%;
            background-size: 210%;
            transition: background 150ms ease-in-out, color 150ms ease-in-out;
        }

        .sixth:hover {
            color: #fff;
            background-position: 0 100%;
        }
    </style>
</head>

<body>
    <button class="btn sixth">Button </button>
    <button class="btn second">Button </button>
    <button class="btn fifth">Button </button>
    <button class="btn first">Button </button>
<button class="btn third">Button </button>
<button class="btn fourth">Button </button>
</body>

</html>

Related Searches
Css Button Hover Effects Codepen
Creative Button Hover Effects Codepen
Simple Button Hover Effects Codepen
Button Animation Css Codepen
Button Css Style Example
Modern Css Buttons
CSS Button Codepen
Cool Css Buttons

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 css free download html Simple Example template web-beast.com

Newer
Older

Post a Comment

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