Hover Button Effect | Different Hover Effects Using HTML CSS
In this tutorial, we learn how we can create Hover button effects using HTML and CSS?
I will create different types of hover button effect programs when the cursor over on button then hover effect works. I hope you know what is hover effect? if you don’t know let’s me explain, when an element changes its style on mouse cursor over on it, this effect is known as hover effect. therefore here one question arises in your mind how many types of hover effect we can create using the pure CSS?
with the help of pure CSS, I will be created thirteen different types of hover button effect, these effects will be very useful, you can use these effects in your website for buttons such as when you will create buttons on a form and Navigation buttons, etc. therefore, you can choose the perfect hover effect according to you need. the most important thing in hover button effects these are based on transition, CSS animation, basic commands. I hope you will learn and use this effect in the future.
so, I am sharing the CSS hover button effect, you will see thirteen (13) different types of effect which are created only with HTML and CSS. there are many effects such as Alternate, Corners, Collision, Diagonal Close, Diagonal Swipe, Double Swipe, Horizontal Overlap, etc. the most important thing is you can use these effect any elements as you want not only on buttons. so, you just have to understand the given below codes to see how these works and use these codes as according to your needs.
Explanation about CSS Hover Buttons Effect source Code
Therefore, as a previous way before sharing the code segment, here I will explain the method and process the effect. for creating the hover button effect I have used HTML & CSS, In the body section for creating the buttons, I have used HTML Hyperlink which is known as <a> a tag. here I have put all these buttons inside the div named .wrap which div is used as class = "wrap" after creating this also put this div inside the main div, here the main div is "container"
In this post mostly all the effects are created using CSS transform property. if you see I have used :after and :before elements. In the major scale, I have increased the size of direction X (x-axis)and Y (y-axis) using transform (get reference info) and for created the collision effect used CSS animation with the help of @media query.
you will see the different effect as compared to others, so these animate using three (3) separate transformations which are describing as 0%, 50%, & 100%, these transformation creates a circle inside the buttons and scale it up. I hope you will be understood better when you see the code segment.
for creating these program you need to create only two files. first file for HTML and Second file for CSS. follow all the step carefully for creating program successfully for hover buttons effect.
First step: Create HTML File as named “index.html” and put the Html code in the file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hover Button Effects</title>
<link rel="stylesheet" href="css/stylesheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="wrap">
<a class="alternate" href="#"><span>Alternate</span></a>
<a class="corners" href="#"><span>Corners</span></a>
<a class="Collision" href="#">Collision</a>
<a class="DiagonalClose" href="#">Diagonal Close</a>
<a class="DiagonalSwipe" href="#">Diagonal Swipe</a>
<a class="DoubleSwipe" href="#">Double Swipe</a>
<a class="horizontalOverlap" href="#"><span>Horizontal Overlap</span></a>
<a class="positionAware" href="#">Position Aware<span></span></a>
<a class="sliceeffect" href="#">slice</a>
<a class="smoosheffect" href="#">smoosh</a>
<a class="swipeeffect" href="#">Swipe</a>
<a class="VerticalOverlap" href="#"><span>Vertical Overlap</span></a>
<a class="zoomIn" href="#"><span>Zoom In</span></a>
</div>
</div>
</body>
</html>
Second step: Create CSS File as named “stylesheet.css” and put the CSS code in the file.
html *,
html *:before,
html *:after {
transition: 0.5s ease-in-out;
}
html i, html em,
html b, html strong,
html span {
transition: none;
}
*:before,
*:after {
z-index: -1;
}
body {
background-color: #f6f7f9;
text-align: center;
font-family: 'Rubik', sans-serif;
padding-top: 30px;
}
a {
line-height: 80px;
text-decoration: none;
}
.container {
margin: 0 auto;
padding: 0 1rem;
width: 100%;
max-width: 1200px;
}
.container .wrap a {
width: 100%;
height: 81px;
max-width: 264px;
color: #212121;
float: left;
margin-left: 33px;
position: relative;
display: block;
overflow: hidden;
margin: 1rem auto;
text-transform: uppercase;
border: 1px solid #cc103b;
}
.container .wrap a:hover {
color: white;
}
.swipeeffect:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
position: absolute;
background-color: #cc103b;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.swipeeffect:hover:before {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.DiagonalSwipe:before {
top: 0;
right: -50px;
bottom: 0;
left: 0;
content: '';
position: absolute;
border-bottom: 80px solid #cc103b;
border-right: 50px solid transparent;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.DiagonalSwipe:hover:before {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.DoubleSwipe:before, .DoubleSwipe:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
position: absolute;
border-bottom: 80px solid #cc103b;
}
.DoubleSwipe:before {
right: -50px;
border-right: 50px solid transparent;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.DoubleSwipe:after {
left: -50px;
border-left: 50px solid transparent;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.DoubleSwipe:hover:before {
-webkit-transform: translateX(-40%);
transform: translateX(-40%);
}
.DoubleSwipe:hover:after {
-webkit-transform: translateX(40%);
transform: translateX(40%);
}
.DiagonalClose:before, .DiagonalClose:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
position: absolute;
}
.DiagonalClose:before {
right: -50px;
border-right: 50px solid transparent;
border-bottom: 80px solid#cc103b;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.DiagonalClose:after {
left: -50px;
border-left: 50px solid transparent;
border-top: 80px solid #cc103b;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.DiagonalClose:hover:before {
-webkit-transform: translateX(-49%);
transform: translateX(-49%);
}
.DiagonalClose:hover:after {
-webkit-transform: translateX(49%);
transform: translateX(49%);
}
.zoomIn:before, .zoomIn:after {
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
border-top: 40px solid #cc103b;
border-bottom: 40px solid #cc103b;
}
.zoomIn:before {
border-right: 40px solid transparent;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.zoomIn:after {
border-left: 40px solid transparent;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.zoomIn:hover:before {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.zoomIn:hover:after {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.corners:before, .corners:after,
.corners span:before,
.corners span:after {
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #cc103b;
}
.corners:before {
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
.corners:after {
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
}
.corners span:before {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
.corners span:after {
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}
.corners:hover:before {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.corners:hover:after {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.corners:hover span:before {
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.corners:hover span:after {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.sliceeffect:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 0 0;
position: absolute;
top: 0;
right: 0;
border-color: transparent #cc103b transparent transparent;
-webkit-transform: rotate(360deg);
}
.sliceeffect:before {
content: '';
width: 0;
height: 0;
position: absolute;
bottom: 0;
left: 0;
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent transparent #cc103b;
-webkit-transform: rotate(360deg);
}
.sliceeffect:before, .sliceeffect:after {
content: '';
width: 0;
height: 0;
border: 0 solid;
position: absolute;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.sliceeffect:before {
bottom: 0;
left: 0;
border-color: transparent transparent transparent #cc103b;
}
.sliceeffect:after {
top: 0;
right: 0;
border-color: transparent #cc103b transparent transparent;
}
.sliceeffect:hover:before, .sliceeffect:hover:after {
border-width: 80px 262.5px;
}
.positionAware span {
width: 0;
height: 0;
background-color: #cc103b;
border-radius: 50%;
position: absolute;
display: block;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.positionAware:hover span {
width: 225%;
height: 562.5px;
}
.positionAware:active {
background-color: #cc103b;
}
.alternate:before, .alternate:after,
.alternate span:before,
.alternate span:after {
content: '';
top: 0;
width: 25.25%;
height: 0;
position: absolute;
background-color: #cc103b;
}
.alternate:before {
left: 0;
}
.alternate:after {
left: 50%;
}
.alternate span:before, .alternate span:after {
top: auto;
bottom: 0;
}
.alternate span:before {
left: 25%;
}
.alternate span:after {
left: 75%;
}
.alternate:hover:before, .alternate:hover:after,
.alternate:hover span:before,
.alternate:hover span:after {
height: 80px;
}
.smoosheffect:before, .smoosheffect:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #cc103b;
}
.smoosheffect:before {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.smoosheffect:after {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.smoosheffect:hover:before {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.smoosheffect:hover:after {
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.VerticalOverlap:before, .VerticalOverlap:after,
.VerticalOverlap span:before,
.VerticalOverlap span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: #cc103b;
transition: 0.4s ease-in-out;
}
.VerticalOverlap:after,
.VerticalOverlap span:before {
top: auto;
bottom: 0;
}
.VerticalOverlap span:before,
.VerticalOverlap span:after {
transition-delay: 0.4s;
}
.VerticalOverlap:hover:before, .VerticalOverlap:hover:after,
.VerticalOverlap:hover span:before,
.VerticalOverlap:hover span:after {
height: 80px;
}
.VerticalOverlap:active {
background-color: #cc103b;
}
.horizontalOverlap:before, .horizontalOverlap:after,
.horizontalOverlap span:before,
.horizontalOverlap span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 80px;
background-color: #cc103b;
transition: 0.4s;
}
.horizontalOverlap:after,
.horizontalOverlap span:before {
left: auto;
right: 0;
}
.horizontalOverlap span:before,
.horizontalOverlap span:after {
transition-delay: 0.4s;
}
.horizontalOverlap:hover:before, .horizontalOverlap:hover:after,
.horizontalOverlap:hover span:before,
.horizontalOverlap:hover span:after {
width: 250px;
}
.horizontalOverlap:active {
background-color: #cc103b;
}
.Collision {
position: relative;
}
.Collision:before, .Collision:after {
position: absolute;
top: 50%;
content: '';
width: 20px;
height: 20px;
background-color: #cc103b;
border-radius: 50%;
}
.Collision:before {
left: -20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.Collision:after {
right: -20px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.Collision:hover:before {
-webkit-animation: clsois-left 0.8s both;
animation: clsois-left 0.8s both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.Collision:hover:after {
-webkit-animation: clsois-right 0.8s both;
animation: clsois-right 0.8s both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@keyframes clsois-left {
0% {
left: -20px;
}
50% {
left: 50%;
width: 20px;
height: 20px;
}
100% {
left: 50%;
width: 375px;
height: 375px;
}
}
@keyframes clsois-right {
0% {
right: -20px;
}
50% {
right: 50%;
width: 20px;
height: 20px;
}
100% {
right: 50%;
width: 375px;
height: 375px;
}
}
Therefore, see the code segment to create the Hover Button Effect. you will be created successfully. you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.
About Author
