See reply to this post for the help on this <!DOCTYPE html> <!-- Coding by CodingLab || www.codinglabweb.com --> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Neumorphism Loading Spinner</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <span></span> </div> </body> </html> HTML: * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f1f1f1; } .wrapper { position: relative; display: flex; align-items: center; justify-content: center; height: 300px; width: 300px; border-radius: 50%; box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1), inset 10px 10px 10px rgba(0, 0, 0, 0.1); } .wrapper::before { content: ""; position: absolute; height: 200px; width: 200px; border-radius: 50%; box-shadow: -10px -10px 15px rgba(255, 255, 255, 1), 10px 10px 10px rgba(0, 0, 0, 0.1); } span { height: 186px; width: 220px; position: absolute; animation: rotate 5s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } span::before { content: ""; position: absolute; height: 30px; border-radius: 50%; width: 30px; background: linear-gradient(45deg, #336dff, #5c89ff); box-shadow: 0 5px 10px rgb(0 0 0 / 30%); } Code (CSS):
Update I was able to get the main issue resolved now my issue is I am trying to add a link into the center of this div wrapper, I have the text there but can't get the link to work I know i'm missing something but I don't know what? <div class="wrapper"> <div id="link"><a href="https://piratesdmcaservice.com">Enter</a> </div> <span></span> </div> HTML:
Try adding "/" to the end of your link <div class="wrapper"> <div id="link"><a href="https://piratesdmcaservice.com/">Enter</a> </div> Code (markup):
@IanT - Hey thank you very much for your reply. I did edit the the code and add "/" at the end of the .com but that still did not work. As of right now this is how it looks like, The "Enter" is showing that it should be hyperlinked however there is no response when clicking on the "Enter" below is an updated picture along with the uploaded coding The additional coding that I added myself after trying to do some research on my own on adding the text and possible coding I had to add addtional CSS so the #Title and #link are the two scripts of CSS code I added everything else in the CSS was default <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Neumorphism Loading Spinner</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <div id="link"> <a href="#https://piratesdmcaservice.com/">Enter</a> </div> </div> <span></span> </div> <div id="title"><h2>Pirate's DMCA Service</h2> </div> </body> </html> HTML: * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f1f1f1; } #title { float: left; vertical-align:top; height: 700px; width: center; position: absolute; font-family: comic sans ms; } #link { font-family: comic sans ms; font-size: 20px; } .wrapper { position: relative; display: flex; align-items: center; justify-content: center; height: 300px; width: 300px; border-radius: 50%; box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1), inset 10px 10px 10px rgba(0, 0, 0, 0.1); } .wrapper::before { content: ""; position: absolute; height: 200px; width: 200px; border-radius: 50%; box-shadow: -10px -10px 15px rgba(255, 255, 255, 1), 10px 10px 10px rgba(0, 0, 0, 0.1); } span { height: 186px; width: 220px; position: absolute; animation: rotate 5s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } span::before { content: ""; position: absolute; height: 30px; border-radius: 50%; width: 30px; background: linear-gradient(45deg, #336dff, #5c89ff); box-shadow: 0 5px 10px rgb(0 0 0 / 30%); } Code (CSS):
This is the current working of the coding that I have the "Enter" is there like it's supposed to be linked but when clicking on it does nothing
@IanT - I'm not sure what you mean by that but I am using Jsfiddle to practice the code to see if things are working, I am also using notepad++ to see what things actually look in a full browser format. https://jsfiddle.net/vscala87/8x1uomsg/ <--- this is the link I believe and regardless if I used Jsfiddle or run it in notepad++ the link doesn't work
The solution is very simple, actually. Add z-index:10000; to #link { font-family: comic sans ms; font-size: 20px; z-index:10000; } Working in jsfiddle: https://jsfiddle.net/aktp7x21/ PS 10000 is arbitrary. You can use a smaller/bigger one if you want to. May not work if it's too small.
I was thinking it could be something like that but forgot what it was referred to as! Let's hope this clears up OPs issue
Thank you very much. I would have never had guessed that. You wouldn't know anything about transitions would, or is transitions not really able to be done with css, I was wanting to some how also in the future when clicking on enter it opens the page like an elevator or something and then brings you to the home page. if not it's kool i'll keep doing some research but thank you so much for this help