Here is the code snippet without the link:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 12px;
background-color: #33ccff;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 22px;
padding: 20px;
width: 195px;
transition: all 0.5s;
cursor: pointer;
margin: 3px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<button class="button" ><span>DOWNLOAD </span></button>
</body>
</html>This is how it appears before adding the link:
I attempted to include a link in the button, but it caused issues such as resizing the button, changing its background color to gray, and the text color to black. Additionally, clicking on the button did not redirect me to the desired website.
I came across a post on Stack Overflow about adding URL links to buttons using CSS and HTML. However, I am unsure of what the .ui-state-highlight class signifies or where to incorporate it.
Can someone guide me on how to correctly add a hyperlink to the button code above so that when clicked, it directs me to another webpage? Thank you!