DEV Community: AWCode0X

Make awesome button hover effect using HTML CSS only

AWCode0X — Sat, 10 Sep 2022 17:02:00 +0000

Hello guys. today I will learn you how to do this:

we need only thoose:

In HTML file we will create button has class called "btn" (or any name you want):

<!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>Awesome Button Hover Effect</title>
</head>
<body>
    <button class="btn">Hover me</button>
</body>
</html>

Don't forget link CSS file with HTML (in head tag):

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

In CSS file:

First we need to remove basic styles:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

we need edit the background and center button

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(8, 8, 8);
}

then we need to edit CSS of button ( without hover first ):

:root {
    --main-color: rgb(180, 255, 68);
}

.btn {
    position: relative;
    padding: 12px 35px;
    border: 3px solid var(--main-color);
    border-radius: 0;
    font-size: 17px;
    background: none;
    color: var(--main-color);
    font-family: sans-serif;
}

make before element for the button:

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
}

Then we need to make hover effect. the before element translateY will be 0 when hover.

.btn:hover {
    color: rgb(0, 0, 1);
}

.btn:hover::before {
    z-index: -10;
    transform: translateY(0);
}

then we need to appear before element only on hover, so we will add overflow hidden for button:

.btn {
   overflow: hidden;
}

the next thing we want to do is making the transitions:

.btn {
    transition: 0.5s linear;
}

.btn:hover {
    transition: 0.5s linear;
}

.btn::before {
    transition: 0.5s linear;
}

.btn:hover::before {
    transition: 0.5s linear;
}

the next thing we want to do is making drop shadow on hover

.btn:hover {
   filter: drop-shadow(0 0 50px var(--main-color));
}

the last step is making RGB color animation:

@keyframes animate {
    0% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(0deg);
    } 100% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(360deg);
    }
}

.btn {
    animation: animate 3s linear infinite;
}

How to build water website with flying bubbles

AWCode0X — Tue, 30 Aug 2022 17:28:59 +0000

Hello guys, today's tutorial is about water website.

First Thing We will create :
1- index.html
2- style.css
3- script.js

In HTML file:

we will create basic structure. if you in VS Code choose from vs code suggestions "html:5" or "!" to do that:

<!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>Document</title>
</head>
<body>

</body>
</html>

now, we will link CSS file with html file in

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

we will use this image for background :

In CSS file :

First remove basic style

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

edit body and add background image for it

body {
    background-image: url(./background.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

In HTML File we will add

we will give for him "container" class, and add into it h1 into it we will add "Under Water" and we will edit CSS of that

<div class="container">
    <h1>Under Water</h1>
</div>

before starting editing container's CSS we need to add font

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

In CSS File:

first we want to center ".container" and make padding from left

.container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
}

then. we need to edit h1 CSS

.container h1 {
    color: white;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 3px;
    font-size: 48px;
}

for now the result is:

Then we will create bubbles:

for HTML :
we will add that:

<div class="bubbles"></div>

for the CSS we will edit ".bubble" and make the animation

.bubbles .bubble {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 46% 54% 40% 60% / 46% 41% 59% 54% ;
    box-shadow: 0 0 10px white inset;
    transform: translateY(-100%);
    animation-name: getDown;
    animation-iteration-count: infinite;
}

@keyframes getDown {
    0%{
        transform: translateY(-100%);
    } 100% {
        transform: translateY( calc(100vh + 100%) );
    }
}

for Javascript :

First we need to link javascript with HTML:

<script src="./script.js"></script>

then (In Javascript file) we will get ".bubble" in variable

let bubbles = document.querySelector('.bubbles')

then we need for loop to make all bubbles we need. we will create a random number for position X, animation daley and duration. finally

for (let i = 0; i < 30; i++) {
    let bubble = document.createElement('div')
    let posX = Math.random() * 100
    let daley = Math.random() * -10
    let duration = (Math.random() * 10) + 3

    bubble.className = 'bubble'
    bubble.style.left = posX + '%'
    bubble.style.animationDelay = daley + 's'
    bubble.style.animationDuration = duration + 's'


    bubbles.appendChild(bubble)
}

the Result:

I Made website for me. Check it

AWCode0X — Tue, 30 Aug 2022 10:01:53 +0000

I want you to check my website and hear your opinion on the website.

The link : amrwael.surge.sh

tell me if you want to explain that

Thanks