I created a button on my website with this code:
// set a short timeout before taking action
// so as to allow hash to be set
setTimeout(() => {
// uses HTML5 history API to manipulate the location bar
history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);
}, 500); // 5 millisecond timeout in this case@media screen and (max-device-width: 1020px) {
button {
font-size: 15px!important;
animation: glow 1s ease-in-out infinite alternate;
transition-delay: 0.6s;
}
@-webkit-keyframes glow {
from {
box-shadow: 0 0 10px #00f498, 0 0 15px #00f498, 0 0 25px #00bcaa, 0 0 50px #00f498;
}
to {
box-shadow: 0 0 10px #00f498, 0 0 25px #00bcaa, 0 0 50px #00f498, 0 0 55px #00f498;
}
}
}
div {
margin: auto;
text-align: center;
padding: 60px;
}
button {
position: relative;
padding: 1em 2em;
outline: none;
border: 1px solid #303030;
background: #000000;
color: #00F498;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 25px;
overflow: hidden;
transition: 0.2s;
border-radius: 20px;
cursor: pointer;
font-family: "Rubik";
font-weight: 900;
}
button:hover {
box-shadow: 0 0 10px #00F498, 0 0 25px #00BCAA, 0 0 50px #00F498;
transition-delay: 0.6s;
}
button span {
position: absolute;
}
button span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00F498);
}
button:hover span:nth-child(1) {
left: 100%;
transition: 0.7s;
}
button span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #00F498);
}
button:hover span:nth-child(3) {
right: 100%;
transition: 0.7s;
transition-delay: 0.35s;
}
button span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #00F498);
}
button:hover span:nth-child(2) {
top: 100%;
transition: 0.7s;
transition-delay: 0.17s;
}
button span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #00F498);
}
button:hover span:nth-child(4) {
bottom: 100%;
transition: 0.7s;
transition-delay: 0.52s;
}
button:active {
background: #00F498;
background: linear-gradient(to top right, #00F498, #00BCAA);
color: #fff;
box-shadow: 0 0 8px #00F498, 0 0 8px #00BCAA, 0 0 8px #00F498;
transition: 0.1s;
}
button:active span:nth-child(1) span:nth-child(2) span:nth-child(2) span:nth-child(2) {
transition: none;
transition-delay: none;
}<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
<a href="#mercadoaudiovisual" target="_top">
<div>
<button id="comeceagora">
<span></span>
<span></span>
<span></span>
<span></span> Comece Agora!
</button>
</div>
</a>I would like to remove the hash from the url anchor, but I have tried several ways and none have worked.
The last code I tried was this one:
<!-- F’in sweet Webflow Hacks -->
<script>
// set a short timeout before taking action
// so as to allow hash to be set
setTimeout(()=>{
// uses HTML5 history API to manipulate the location bar
history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);
}, 5); // 5 millisecond timeout in this case
</script>
The site was built in a site builder called Zyro, I have the possibility to use Javascript, html and css and I have access to the <head>, but I believe the scripts don't work because I don't have direct access to the <body> of the site.
The button has been added to an embed code element.
The website link is this: https://bldgprod.com.br/
UPDATE:
I don't know if I formulated my question correctly, but I want the click on the button not to change the page url, because if a person wants to share the link with someone else, the link will be "contaminated".
