Button hover effect using html and CSS | top | bottom | left | right
Planics developer is always try to
gives you Best design for Website. Here you can get Free Html template
or design.
We try to Provide best designing with
Accurate and simple code.
How to Design Responsive Home page?
Here we design different mouse hover
effect for website page if you want to
use then you can download or copy below code and attach with your website.
Free Responsive Homepage for carwebsite or car décor ?
How to set mouse hover effect of anycontrol using html and css?
buttonHover.html
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Button Hover</title>
<meta
name='viewport' content='width=device-width, initial-scale=1'>
<link
rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link
rel='stylesheet' type='text/css' href='buttonHover.css'>
<script
src='main.js'></script>
</head>
<body>
<div
class="container">
<a href="#">Hover
me<span class="left"></span></a>
<a
href="#">Hover me<span
class="right"></span></a>
<a
href="#">Hover me<span
class="top"></span></a>
<a
href="#">Hover me<span
class="bottom"></span></a>
<a
href="#">Hover me<span
class="dia"></span></a>
</div>
</body>
</html>>
|
buttonHover.css
*
{
margin: 00px;
padding:00px;
}
.container
{
height: 100vh;
width: 100%;
display: flex;
justify-content:
space-evenly;
align-items:
center;
}
.container a
{
text-decoration:
none;
height: 50px;
width: 120px;
line-height:50px;
text-align:
center;
position:
relative;
color: black;
text-transform:
uppercase;
}
.container a:hover
{
color: white;
}
.container span
{
height: 50px;
width: 120px;
position:
absolute;
background-color: #ffa62b;
border-radius:
5px;
z-index: -1;
}
.container .left
{
height: 50px;
width: 00px;
position:
absolute;
top: 00px;
left: 00px;
transition:ease-in-out 1s;
}
.container a:hover
.left
{
height: 50px;
width: 120px;
transition: 1s;
}
.container .right
{
height: 50px;
width: 00px;
position:
absolute;
top: 00px;
right: 00px;
transition:ease-in-out 1s;
}
.container a:hover
.right
{
height: 50px;
width: 120px;
transition: 1s;
}
.container .top
{
height: 00px;
width: 120px;
position:
absolute;
top: 00px;
right: 00px;
transition:ease-in-out 1s;
}
.container a:hover
.top
{
height: 50px;
width: 120px;
transition: 1s;
}
.container .bottom
{
height: 00px;
width: 120px;
position:
absolute;
bottom: 00px;
right: 00px;
transition:ease-in-out 1s;
}
.container a:hover
.bottom
{
height: 50px;
width: 120px;
transition: 1s;
}
.container .dia
{
height: 00px;
width: 00px;
position:
absolute;
top: 00px;
left: 00px;
transition:ease-in-out 1s;
}
.container a:hover
.dia
{
height: 50px;
width: 120px;
transition: 1s;
}
|
0 coment�rios: