How to Create a Hover Button with a Glowing Shadow Effect Using CSS, HTML

How to Create a Hover Button with a Glowing Shadow Effect Using CSS, HTML

In this video, you are going to learn how to create a hover button with a glowing shadow effect. it is very simple to design and I think it will helpful for you when you design attractive buttons. This shadow effect will work when you hover the cursor on the button. Let's see how to create this hover button with a glowing shadow effect.

In this video, you are going to learn how to create a hover button with a glowing shadow effect. it is very simple to design and I think it will helpful for you when you design attractive buttons. This shadow effect will work when you hover the cursor on the button. Let's see how to create this hover button with a glowing shadow effect.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>

        <title>Glow Shadow Hover Button</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <a href="#" class="btn">Button</a>

    </body>
</html>

style.css


body{
    margin: 0;
    padding: 0;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}
/*button css*/
.btn{
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: bold;
    background: #1E90FF;
    width: 160px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}
.btn:hover, .btn:focus, .btn:active{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

css html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.

HTML and CSS Full Course | Learn HTML & CSS in 10 Hours | HTML & CSS Tutorial

Great Learning brings you this 10-hour tutorial on HTML and CSS to help you understand everything you need to know about this topic and getting started on the journey to learn it well. This video starts off with HTLM and associated concepts such as editors, skeleton, comments, elements, tags, etc. Then we look at CSS and related concepts including its basic structure, editors, comments, its types, selectors, colour, background, text and so on. Finally, we look at an HTML and CSS project to apply every concept discussed heretofore! This video teaches HTML and CSS and their key functions and concepts with a variety of demonstrations & examples to help you get started on the right foot.

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.