Hello developers, today in this blog, you'll learn how to create a Button with Tooltip with Hover Effect using HTML & CSS.
Tooltip is used to display a message that appears when a cursor is positioned over an icon, image, hyperlink, or any other.
In this blog (Button with Tooltip with Hover Effect), there are four buttons which were named as to show top, show right, the show left, and show bottom that is arranged one after the other at the center of the page. On hovering the button, the tooltip will appear based on the position.
The source code of this Button with Tooltip with Hover Effect is given below, if you want the source code of this program, you can copy it. You can use this Button with Tooltip with Hover Effect code with your creativity and can take this project to the next level.
Button with Tooltip with Hover Effect [Source Code]
To make this website (Button with Tooltip with Hover Effect), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
text-align: center;
}
.tooltip {
background: #12192c;
color: #fff;
font-size: 1.25rem;
border-radius: 50px;
padding: 10px 15px;
position: relative;
margin: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.tooltip::after {
background-color: #313247;
border-radius: 10px;
color: #fff;
display: none;
padding: 10px 15px;
font-size: 1rem;
font-weight: lighter;
position: absolute;
z-index: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.tooltip.top::after {
content: "Top";
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 10px));
}
.tooltip.bottom::after {
content: "Bottom";
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + 10px));
}
.tooltip.right::after {
content: "Right";
top: 0;
right: 0;
transform: translateX(calc(100% + 10px));
}
.tooltip.left::after {
content: "Left";
top: 0;
left: 0;
transform: translateX(calc(-100% - 10px));
}
.tooltip:hover::after {
display: block;
}
.tooltip::before {
content: "";
background-color: #313247;
display: none;
position: absolute;
width: 15px;
height: 15px;
z-index: 1;
}
.tooltip:hover::before {
display: block;
}
.tooltip.top::before {
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}
.tooltip.bottom::before {
bottom: 0;
left: 50%;
transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}
.tooltip.right::before {
top: 50%;
right: 0;
transform: translate(calc(100% + 5px), -50%) rotate(45deg);
}
.tooltip.left::before {
top: 50%;
left: 0;
transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 10px;
}
Thank you for reading our blog. If you face any problem in creating this Button with Tooltip with Hover Effect using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team