Skip to main content
R
REELHERO
Inspiring
March 13, 2025
Answered

simple circle animation link not working

  • March 13, 2025
  • 1 reply
  • 1830 views

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

 

 

    Correct answer osgood_

    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.


    quote

    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;
    }

    1 reply

    Nancy OShea
    Nancy OShea
    Braniac
    March 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 &amp; Moderator
      R
      REELHEROAuthor
      Inspiring
      March 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 !

      Nancy OShea
      Nancy OShea
      Braniac
      March 13, 2025

      It's valid since HTML5. 

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

       

       

       

       

      Nancy O'Shea— Product User, Community Expert &amp; Moderator
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices