simple circle animation link not working

Report · Mar 13, 2025

to keep things clean- simple circle ripple animation with a link but the link isnt working and i dont know why

https://codepen.io/Todd-Heyman/pen/PwoOyGB

Report · Mar 13, 2025

Short answer: remove position: absolute from the anchor.

This works.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Test</title>
<style>
html, body {
 margin: 0 auto;
 color: white;
 font-family: 'Montserrat', sans-serif;
}
/* Circle */
.circle {
 height: 80px;
 width: 80px;
 border-radius: 50%;
 background-color: #ff4343;
 display: inline-block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.circle:before, .circle:after {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 border: 1px solid #ff4343;
 border-radius: 50%;
}
.circle:before {
 animation: ripple 2s linear infinite;
}
.circle:after {
 animation: ripple 2s linear 1s infinite;
}
@keyframes ripple {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
opacity:1;
}
100% {
transform: scale(1.6);
opacity:0;
}
}
/* Text */
.text {
 text-align: center;
 vertical-align: middle;
 line-height: 80px;
 margin: 0;
}
</style>
</head>

<body>
<a href="https://pitchlab.net/showcase">
<!--positioned elements here-->
<div class="circle">
<p class="text">Click me</p>
</div>
</a>

</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 13, 2025

Had no idea you could position a link and anchor tag around a div!

I tried it every which way to Sunday except that !

Nancy thank you !

Report · Mar 13, 2025

It's valid since HTML5.

In previous HTML versions, it's not valid code.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 18, 2025

Nancy a curious thing is happening..

the circle link works fine:

https://pitchlab.net/lowdown/

but if I add a fade-in class to the div so it can fade in like the rest of the page, it falters:

version 1, I add it inside the div, keeping the link outside

https://pitchlab.net/lowdown/index_fadetest1.html

it doesnt fade in

version 2, i add it outside the div and it doesnt appear

https://pitchlab.net/lowdown/index_fadetest2.html

doesnt seem to be a z-index issue.. thoughts?

Report · Mar 19, 2025

version 2, i add it outside the div and it doesnt appear
https://pitchlab.net/lowdown/index_fadetest2.html

doesnt seem to be a z-index issue.. thoughts?

By @REELHERO

You just need to add to the fade-in2 css selector:

position: relative;
z-index: 1000;

Then revise the html to:

<div class="fade-in2"> 
<a href="https://pitchlab.net/contact"> 
<div class="circle2 shadow">
<p class="circletext">  let's make<br><span class="waves">waves</span><br>hit us up</p>
</div>
</a>
</div>

Currently your div/a tags are closed in the wrong position plus you must remove the second instance of 'fade-in2' from the child div.

Report · Mar 19, 2025

thanks you Osgood

I had tried that formation (the fade class in a container wrapping the div) but hadnt added a postion to the fade selector.. I have to spend some time undertanding Positioning and how it affects the elements of a page..

Report · Mar 19, 2025

I have to spend some time undertanding Positioning...
By @REELHERO

===========

Yup. Positioning has unwanted consequences that can wreak havoc with your layout.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 19, 2025

Like I said to you and Ben before, I havent gotten to the responsive nature of the site yet Nancy .. youre not suprising me with that screenshot lol but I appreciate the attempt at a zing 🙂 - Im making sure its the way i want it on desktop, and then thats next.. probably today

However note the larger buttons and contrast.. Im paying attention to the rules you posted (though dont post any screenshots of where ive failed please 🙂 - I havent gone over it in detail yet but I will)

Report · Mar 19, 2025

Putting the horse behind the cart isn't the best approach here.

Responsive frameworks like Bootstrap are built on a MOBILE FIRST principle. It just works. No muss, no fuss. No special code or media queries needed. The framework handles all the heavy lifting for you.

https://www.w3schools.com/bootstrap5/

But it won't work with positioned elements.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 23, 2025

Totally hear you Nancy I have an urgency of getting this up - dont have time at the moment to learn- I promise you when things settle I will.. hope youve noticed I pay attention - this is all self-taught and Im a commercial director (you should read the article I wrote for the Hollywood Reporter about the fires and the state of the biz.. it seemed to move Lena and explains the urgency) and not a designer (obviously) so think Ive come far

for now I made the site responsive for mobile (youll only see what I mean if you use a phone or a simulator)

https://pitchlab.net/

Its working well - only issues Im finding are - the IN TOUCH link on LOWDOWN seems to be inconsistent.. it doesnt always click seamlessly - not sure why-

And in HOLLA Id like to make the text on the contact form darker but Ive tried everything to affect that text but no go.. i can change the font but not the color or weight.. not sure why.

Report · Mar 24, 2025

And in HOLLA Id like to make the text on the contact form darker but Ive tried everything to affect that text but no go.. i can change the font but not the color or weight.. not sure why.

By @REELHERO

Try:

::placeholder {
color: #666666;
opacity: 1;
}

Report · Mar 24, 2025

perfect!

::placeholder thats a new one to me..thank you!

Report · Mar 24, 2025

any thoughts on the IN TOUCH LINK on LOWDOWN. on mobile?

i checked for overlays or z-index issues and I cant find any -

Report · Mar 19, 2025

testing some position for theory so I can learn while I have your attention-

I switched the animation from a fade to a slide up and its not working - Im guessing position is the culprit

https://pitchlab.net/lowdown/slidertest.html

the circle is in a fixed postion (i want it to stay at approx the bottom of the page where I set it) but I want it to slide up on page load (as the body text does) does the slider/activer animation class need to be relatively positioned here?

conversely will the slider work if my div is fixed..?

Report · Mar 20, 2025

@REELHERO wrote:

I switched the animation from a fade to a slide up and its not working - Im guessing position is the culprit

https://pitchlab.net/lowdown/slidertest.html

the circle is in a fixed postion (i want it to stay at approx the bottom of the page where I set it) but I want it to slide up on page load (as the body text does) does the slider/activer animation class need to be relatively positioned here?
conversely will the slider work if my div is fixed..?

Add to your css selector 'circle2':

animation: slideMeUp ease 700ms;

Then create another keyframe animation for slideMeUp:

@keyframes slideMeUp {
0% {
transform:translate(-50%, 200px);
}
100% {
transform:translate(-50%, 0px);
}
}

Report · Mar 20, 2025

thank you -

I wanted to add a delay but it loads then delays..

https://pitchlab.net/lowdown/index_delay.html

using

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1);
animation-delay: 1s;

is that not correct?

Report · Mar 20, 2025

thank you -
I wanted to add a delay but it loads then delays..

https://pitchlab.net/lowdown/index_delay.html

using

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1);
animation-delay: 1s;

is that not correct?

By @REELHERO

You have opacity: 1!important set on the .circle2 css selector............so it will show on page load..........set the opacity to 0 WITHOUT adding !important at the end otherwise that will overide the opacity that you have set on the slide_up keyframe animation.

Also you need to add 'forwards' to your .circle2 css animation , see below:

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1) forwards;

Report · Mar 20, 2025

shazam

https://pitchlab.net/lowdown/

thank you- sponging this in I promise..

Report · Mar 20, 2025

Bookmark this:

CSS Tricks — Animation Properties Almanac

https://css-tricks.com/almanac/properties/a/animation/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 20, 2025

thank you!

Report · Mar 20, 2025

This is my favourite go-to

CodePen Spark

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

simple circle animation link not working

5 Correct answers