Button Amazing effect: HTML CSS JavaScript @rayen-code

Rayen


Buttons are a crucial element of web design that encourages user interaction. Adding visual feedback when a user hovers over a button can make your website more engaging and user-friendly. In this tutorial, we'll guide you through the process of creating a stylish button with a color change hover effect using HTML and CSS.

Step 1: Setting Up the HTML Structure:

Begin by setting up the basic HTML structure for your button. Use a "button" element and add relevant text to it.
/*-------------------- CSS --------------------*/
<style>         
       /* style  */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
:root{
    --x: 45deg
}
body{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    
    
}

a{
    /* border: 1px solid red; */
    position: relative;
    width: 150px;
    height: 60px;
    border-radius: 5px;
    margin: 50px;
}
 .back{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(var(--x), red, black, black, blue);
}

.two{
    filter: blur(12px);
}

.button{
    position: absolute;
    border: 1px solid black;
    top: 2px;
    right: 2px;
    left: 2px;
    bottom: 2px;
    background-color: rgba(0, 0, 0, 0.299);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.3rem;
    overflow: hidden;
    
}
.button::before{
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.087);
    transform: skew(30deg);
}

</style>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) and apply styles to your button. Define the default and hover states for the button. Additionally, set up a transition property to achieve a smooth color change animation on hover.
/*-------------------- CSS --------------------*/
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <link href="style.css" rel="stylesheet"></link>
    <title>button effect</title>
</head>
<body>

    <a href="#">
        <span class="back one"></span>
        <span class="back two"></span>
        <span class="button">BUTTON</span>
    </a>


    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with Java Script:

//-------------------- Java Script --------------------//
// java script 
let a = document.querySelector('a')



    a.addEventListener('mousemove', move =>{
        let x = move.clientX * 2.5;
        a.style.setProperty('--x', x + 'deg');
    })

Feel free to customize the button's colors, sizes, and fonts to match your website's design. You can also explore other CSS properties to further enhance the button's appearance, such as adding rounded corners or shadows.

You've successfully created a button with a color change hover effect using HTML and CSS. Adding interactive elements like this to your website can improve user experience and make your site more visually appealing. This simple yet effective effect can be applied to various buttons on your website to encourage user interaction.

By following this tutorial, you've gained a valuable skill in web design that can help you create visually engaging and interactive user interfaces. Incorporate this effect into your website's buttons to create a more dynamic and modern look.


0 Comments