Hover button

Developer
Szymon Dziewoński
Size
2,147 Kb
Views
8,096
  1. Hover button Previews
  2. Hover button HTML Codes
  3. Hover button CSS Codes
  4. Hover button JS Codes

How do I make an hover button?

Simple example of hover button with jquery. What is a hover button? How do you make a hover button? This script and codes were developed by Szymon Dziewoński on 23 December 2022, Friday.

Hover button Previews
IQ Test

Hover button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover button </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li> <a href="" class="active"> <div> <img src="http://revelier.home.pl/but/button_hover.png"/> </div> <span>Main</span> </a> </li> <li><li> <a href=""> <div> <img src="http://revelier.home.pl/but/button_hover.png"/> </div> <span>button two</span> </a> </li> <li> <a href=""> <div> <img src="http://revelier.home.pl/but/button_hover.png"/> </div> <span>button three</span> </a> </li> <li> <a href=""> <div> <img src="http://revelier.home.pl/but/button_hover.png"/> </div> <span>button four</span> </a> </li> <li> <a href=""> <div> <img src="http://revelier.home.pl/but/button_hover.png"/> </div> <span>button five</span> </a> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hover button - Script Codes CSS Codes

nav{ width: 765px; margin: 20px auto; position: relative;
}
nav ul li{ float:left; list-style-type: none;
}
nav ul li a{ width: 145px; height: 51px; display: block; background-image: url("http://revelier.home.pl/but/but.png"); color: #fff; text-decoration: none;
}
nav ul li a div{ width: 145px; height: 51px; overflow: hidden; position: absolute; z-index: 100;
}
nav ul li a span{ z-index: 101; position: absolute; text-transform: uppercase; font-size: 10px; font-family: arial, sans-serif; text-align: center; line-height: 55px; width: 145px;
}

Hover button - Script Codes JS Codes

$("nav ul li a.active img").css({ "margin-top": "-51px"
})
$("nav ul li a:not(.active)").hover(function(){ $(this).find("img").stop().animate({ "margin-top": "-51px" },{ queue : false, duration: 200 }); }, function() { $(this).find("img").stop().animate({ "margin-top": "0px" },{ queue : false, duration: 50 });
});
Hover button - Script Codes
Hover button - Script Codes
Home Page Home
Developer Szymon Dziewoński
Username SzymonDziewonski
Uploaded December 23, 2022
Rating 3
Size 2,147 Kb
Views 8,096
Do you need developer help for Hover button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Szymon Dziewoński (SzymonDziewonski) Script Codes
Name
Animated logo
Hover effect
Menu with hover slide effect
Earth animation
Vertical-align
Random count
Svg animation draw
Social Icons net animation
Simple loader
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!