An Interest In:
Web News this Week
- March 6, 2024
- March 5, 2024
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
September 10, 2022 05:02 pm GMT
Original Link: https://dev.to/awcode0x/make-awesome-button-hover-effect-using-html-css-only-1abn
Make awesome button hover effect using HTML CSS only
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;}
Original Link: https://dev.to/awcode0x/make-awesome-button-hover-effect-using-html-css-only-1abn
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To