Hover Effects With HTML CSS

Preview

HTML Code:

        <!DOCTYPE html>
        <html>
            <head>
                <title>INTERESTING Code Plus</title>
                <link rel="stylesheet" type="text/css" href="style.css">
            </head>
        
        <body>
            <h2>
                 <span><i></i>F</span>
                 <span><i></i>O</span>
                 <span><i></i>C</span>
                 <span><i></i>U</span>
                 <span><i></i>S</span>
            </h2>
        </body>    
        </html>

CSS Code:

        *
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: monospace;
        }
        
        body
        {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(45deg,#ff0057,#2196f3);
        
        }
        
        h2 
        {
            position: relative;
            display: flex;
            gap: 5px;
            color: #fff;
            font-size: 4em;
            cursor: pointer;
        }
        
        h2 span
        {
            position: relative;
            filter: blur(5px);
            padding: 0 5px;
            transition: 0.5s;
        }
        
        h2 span:hover
        {
            filter: blur(0px);
            transition: 0s;
        }
        
        h2 span i
        {
            position: absolute;
            inset: 0;
            background: transparent;
        }
        
        h2 span:hover i::before
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            height: 8px;
            background: #fff;
            box-shadow: 0 53px #fff,
            36px 53px #fff,
            36px 0 #fff;
        }
        
        h2 span:hover i::after
        {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 2px;
            background: #fff;
            box-shadow: 0 60px #fff,
            30px 60px #fff,
            30px 0 #fff;
        }

INTERESTING Code

Amazing Focus Hover Effects With HTML CSS

Hover Effects With HTML CSS

Preview

Post a Comment

0 Comments

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget

INTERESTING Code

Amazing Focus Hover Effects With HTML CSS

Hover Effects With HTML CSS

Preview

Post a Comment

0 Comments

Social Media

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget