Add hovering text to your href links
What is it?
Here we have a script that adds a Click Me Text above your links when they are hovered over or active.
What can i use this for?
Showing some additional information when your links are active.
Should I use it?
If you want to bring some extra attention or information to your text links you cold use this, it may be more useful to change the text per link and make it more of a title tag rather than just having the words click me on each link.
Conclusion
This is a nice example of adding some additional information and animation to your text links however depending on the link positioning your milage may vary with the usage of this css. It could be a nice base for some custom link hover text or to show a bit more information on your links.
Original Codepen Source
Thanks to the author jhancock532, this code comes from the
Click Me! Link Hover Effect pen on Codepen.
Add hovering text to your href links Demo
View Demo Full Screen View Demo New Tab
Add hovering text to your href links Code
HTML
<div class="container">
<h1>Some text with a <a class="link" href="https://jhancock532.github.io/link-hover-effects/">link</a> in it.</h1>
<div class="paragraph-container">
<p>
Here's a paragraph to test out the link effect over multiple lines of text. <a class="link" href="https://jhancock532.github.io/link-hover-effects/">Here is an extended length version of the link which displays slightly awkwardly because of how long it is.</a> These effects don't always display well for longer links, usually because pseudoelements have difficulty <a class="link" href="https://jhancock532.github.io/link-hover-effects/">with absolute positioning</a>.
</p>
</div>
</div>CSS
h1 {
font-family: 'Baloo Tamma 2', sans-serif;
font-size: 2rem;
}
p {
font-family: 'Baloo Tamma 2', sans-serif;
font-size: 1.4rem;
}
.container {
text-align: center;
padding-top: 2rem;
}
.paragraph-container {
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
.link {
position: relative;
}
.link::before {
content: "Click";
font-size: 0.9em;
background: black;
color: white;
line-height: 1em;
padding: 0.2em 0.15em 0;
border-radius: 0.2em;
position: absolute;
top: -1em;
left: 50%;
opacity: 0;
transform: translate(-65%, 20%) rotateZ(-1deg);
transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
}
.link:after {
content: "me!";
position: absolute;
font-size: 0.9em;
background: black;
color: white;
line-height: 1em;
padding: 0.2em 0.15em 0;
border-radius: 0.2em;
top: -1em;
left: 50%;
opacity: 0;
transform: translate(45%, 20%) rotateZ(1deg);
transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
}
.link:hover::before {
opacity: 1;
transform: translatex(-75%) rotateZ(-3deg);
}
.link:hover::after {
opacity: 1;
transform: translatex(45%) rotateZ(3deg);
}Scripts
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&display=swap" rel="stylesheet">External Link for Add hovering text to your href links
Add Comment
Other Items in Link Effects
Related Search Terms
Other Categories in Code
Random Quote
