Cool CSS Menu Hover Effects - Using :before and :after pseudo element - Pure CSS Tutorial

preview_player
Показать описание
Please LIKE our Facebook page for daily updates...

Music Name : Spring In My Step by Silent Partner from YouTube Audio Library
  1. Online Tutorials
  2. css effects
  3. css hover effects
  4. css3 hover effects
  5. mouse hover effects
  6. menu hover effects
Рекомендации по теме
Animated Navigation Bar 0:03:39

Animated Navigation Bar in HTML and CSS Menu Hover Animation Effects

Draw Underline Link 0:05:50

Draw Underline Link Hover Effect | CSS Menu Hover Effect

COOL MENU HOVER 0:04:52

COOL MENU HOVER EFFECTS USING HTML AND CSS

Cool CSS Menu 0:07:41

Cool CSS Menu Hover Effects - Html5 Css3 Hover Effect Tutorial

Cool Hover Effects 0:00:22

Cool Hover Effects using CSS😈🔥 #shorts #ytshorts #viral #web

Animated Navigation Bar 0:04:19

Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects

✨✨Creating Button Hover 0:00:10

✨✨Creating Button Hover Effects with HTML and CSS

CSS Menu Hover 0:05:46

CSS Menu Hover Effects | Html CSS Website Menu @OnlineTutorialsYT

How to Build 0:23:59

How to Build a Responsive Navbar with HTML, CSS & JavaScript | Beginner Tutorial

Cool CSS Menu 0:06:51

Cool CSS Menu Hover Effects - Using :before and :after pseudo element - Pure CSS Tutorial

Animated Navigation Menu 0:05:43

Animated Navigation Menu Bar using HTML CSS | Menu Hover Animation

sparkle button using 0:00:05

sparkle button using css #webdevelopment #html #css #htmlcss #webdesign #tutorials

CSS Menu Hover 0:00:10

CSS Menu Hover Effect #css #cssanimation #cssborder #youtubeshorts #shorts #youtubeshortsvideo

Pure CSS Creative 0:04:31

Pure CSS Creative Menu Hover Effects | Html5 CSS3 Tutorial

css menu hover 0:00:45

css menu hover effect | #menu #short #gradient

CSS Menu Hover 0:00:10

CSS Menu Hover Effect Modern Smooth #shorts

Draw Underline Link 0:04:30

Draw Underline Link on Hover Effect | CSS Menu Hover Effect With Animation

Learn CSS ::before 0:03:57

Learn CSS ::before and ::after in 4 Minutes

Awesome Css Menu 0:07:42

Awesome Css Menu Hover Effect - Html5 Css3 Hover Effect Tutorial - Plz SUBSCRIBE Us For Daily Videos

3d Flip Menu 0:07:56

3d Flip Menu Hover Effect - Html5 Css3 Cool Menu Hover effects - Pure Css Tutorials

✨🖱️ Glowing Hover 0:00:10

✨🖱️ Glowing Hover Menu with HTML & CSS! 🔮

How to create 0:01:00

How to create a Vertical Menu with Amazing Hover Effect using HTML CSS only | Geekboots

CSS3 Menu Item 0:03:09

CSS3 Menu Item Hover Effects | Slide Text Animation On Hover

Best Menu Hover 0:00:54

Best Menu Hover Effect | HTML and CSS important tricks 🤫🤫🤫🤫

Комментарии
Автор

CSS CODE:
body {
margin: 0;
padding:0;
font-family: sans-serif;
background: #151519;
}

ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
}

ul li {
list-style: none;
}

ul li a {
position: relative;
display: block;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
text-transform: uppercase;
color: #262626;
font-weight: bold;
transition: .5s;
}

ul li a:hover {
color: #fff;
}

ul li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
transform: scaleY(2);
opacity: 0;
transition: .5s;
z-index: -1;
}

ul li a:hover:before {
transform: scaleY(1.2);
opacity: 1;
}

ul li a:after {
content: '';
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform: scale(0);
transition: .5s;
z-index: -1;
}

ul li a:hover:after {
transform: scale(1);
}

ul li a {
color: white;
margin-left: 0;
}
HTML CODE: (I included other stuffs btw)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="ie=edge">
<title>Title Of your Tab Here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<ul>
<li><a href="Your link or file destination ex. Test.html">Text</a></li>
<li><a href="Your link or file destination ex. Test.html">Text</a></li>
<li><a href="Your link or file destination ex. Test.html">Text</a></li>
</ul>
**NOTE** You can add or lesser the links you want to go or write in.

nightcoreheaven
Автор

Dude!!! Your CSS skills are on whole new level <3 I truly wish that one day I'll be just as good as you

udaykulkarni
Автор

Hello, I have a question because there are elements to which you position without applying the properties of top, left, right, bottom?

wistongramirez
Автор

Helped me figure out I need to add transition to the original item rather than apply some :after styling, thanks!

joeybertschler
Автор

Pls is you code is not clear to read can you project ot big size thnx

umarsandaahmed
Автор

Plz give some explanation...
Anyway awesome video...

sivamuruganandamj
Автор

Attractive Nav ...Any animation or any page make always responsive

Santoshumnekar
Автор

Cool, I learn lot about after, before ans scale transform. Thanks for great tutorial

janitholagama
Автор

So nice bro how you can remember these properties can help or you written on the paper?

shahzaib
Автор

Thanks a lot for all your videos.👍👍👍👍👍👍👍👍👍

kandi
Автор

But, it would be so better if you place those 2 screens side by side, So that we could watch the changes too....please consider this!

muralikrishna
Автор

I like your channel, but I hate this specific music, it's everywhere on youtube

anisdhouieb
Автор

So can anyone tell me what is z-index? And why that text colored changed after using z-index?

Its_Pritam_
Автор

SIR BEFORE OR AFTEER KY SATH SAI KHELA HY GREAT SIR KAMAL

azeemsaleem
Автор

Sir plzzz explain us it would be much better

bipulsantosh
Автор

Very good thanks for this tutorial
But this exemple is not respensive

irinabella