TechsMoon

  • News
  • Breakfast Hours
  • How To
  • Apps for PC
  • Mobile Apps
  • WordPress
  • Windows
  • Write For Us
You are here: Home / Button / Button Hover Effect

Button Hover Effect

April 29, 2021 By Naruto Singh Leave a Comment | Last Updated April 29, 2021

HTML File: (index.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 Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#">Button</a>
</body>
</html>

CSS File: (style.css)

body
{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
a
{
    position: relative;
    padding: 8px 30px;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    border: 2px solid #000;
    transition: 0.5s;
}
a:hover
{
    color: #fff;
}
a::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width:50%;
    height: 100%;
    background: #000;
    z-index: -1;
    transform: scaleX(0);
    transition: transform 0.5s;
    transform-origin: left;
}
a:hover::before
{
    
    transform: scaleX(1);
    transition: transform 0.5s;
    transform-origin: right;
}
a::after
{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width:50%;
    height: 100%;
    background: #000;
    z-index: -1;
    transform: scaleX(0);
    transition: transform 0.5s;
    transform-origin: right;
}
a:hover::after
{
    
    transform: scaleX(1);
    transition: transform 0.5s;
    transform-origin: left;
}

Source Code:

index.htmlDownload
style.cssDownload
See also  CSS 3D Number Countdown Animation Effects

Filed Under: Button, CSS Effects, Hover Effects Tagged With: front end, frontend developer, hover, web, web development, webdesign

About Naruto Singh

Tech Blogger, Engineering Student and Proud Indian

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

What’s New

  • Shoney’s Breakfast Hours – Everything You Need to Know
  • Hardee’s’ Breakfast Hours and Menu USA 2024
  • Golden Corral Breakfast Hours & Menu Details for 2024
  • What Are McDonald’s Breakfast Hours in 2024?
  • What Is Burger King’s Breakfast Hours for 2024
  • [Solved] Windows Modules Installer Worker High CPU and Disk Usage Error In Windows 10
  • Solve APC Index Mismatch In Windows
  • Windows 11 Release Date of 2021, Features, Concepts And Latest News You Need to Know
  • Add Star Rating Rich Snippets To WordPress Website Without Plugin
  • Download Latest Unacademy App for PC – For Windows 10/8/8.1/7

Handcrafted with
© Copyright 2019-2020 TechsMoon
Privacy Policy | Contact Us | Disclaimer | Sitemap

  • News
  • Breakfast Hours
  • How To
  • Apps for PC
  • Mobile Apps
  • WordPress
  • Windows
  • Write For Us