TechsMoon

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

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

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


What’s New

  • [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
  • How to change Hathway WiFi Password?
  • [Solved ] The site is experiencing technical difficulties : WordPress Error
  • How to Turn On Bluetooth on Windows 10 – Fix all Problems
  • [Solved] 3 Best Ways To Solve IRQL_NOT_LESS_OR_EQUAL BSOD Error On Windows 10
  • [Solved] DNS Server is Not Responding or Unavailable Error on Windows 10

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

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