Awesome Hover effect on Buttons using Html and CSS : Source Code

  

Tutorial 1

Awesome Hover effect on Buttons using HTML and CSS || Web Tutorials - Yuvan Web Arts

  Hey Guys , Welcome To My Blog :- Web Tutorials || Yuvan Art

Full Process :-  Click On The Below Link To Watch Full Process To Create Button with awesome Hover effect using HTML And CSS.

Awesome Hover effect on Buttons using HTML and CSS || Web Tutorials - Yuvan Web Arts

Part ( 1 ) HTML Code :- 

<!-- Yuvan Web Arts - Web Tutorials -->

<!-- Button With Awesome Hover Effect - HTML Part -->

<!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>Hover Buttons</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <button class="btn btn1">Click Me</button>

        <button class="btn btn2">Click Me</button>

    </div>

</body>

</html>

Part ( 2 ) CSS Code :- 

/* Yuvan Web Arts - Web Tutorials */

/* Button With Awesome Hover Effect - CSS Part */

body{

    margin: 0;

    padding: 0;

    background-image: url("bg-img.jpg");

    background-size: 150%;

    background-repeat: no-repeat;

}

.container{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

}

.btn{

    background: none;

    border: 3px solid orangered;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    text-transform: uppercase;

    padding: 12px 20px;

    min-width: 200px;

    margin: 10px;

    color: white;

    font-weight: bold;

    font-size: large;

    cursor: pointer;

    transition: color 0.4s linear;

    position: relative;

}

.btn:hover{

    color: black;

}

.btn::before{

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: orangered;

    z-index: -1;

    transition: transform 0.8s;

    transform-origin: 0 0;

    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);

}

.btn1::before{

    transform: scaleX(0);

}

.btn2::before{

    transform: scaleY(0);

}

.btn1:hover::before{

    transform: scaleX(1);

}

.btn2:hover::before{

    transform: scaleY(1);

}

Part ( 3 ) Background Image :- 

Thank You !!!

Visit More Here : 

YouTube  And  Website