Currently, I am utilizing purecss to design colorful buttons on my website. However, I am encountering an issue where the href link is not clickable even though the button displays correctly.
<button class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</button>
Unfortunately, clicking on the button does not seem to work. I am puzzled as to why this functionality is not functioning properly.
The button in question is a larger size and appears like this:
https://i.stack.imgur.com/6Mqx8.png
Here is the CSS styling applied to my button:
/*
* -- PURE BUTTON STYLES --
* Customizing the appearance of pure-button elements
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
.button-xsmall {
font-size: 0.5vw;
}
.button-small {
font-size: 1vw%;
}
.button-large {
font-size: 2vw%;
}
.button-xlarge {
font-size: 2.5vw;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* green */
}
.button-error {
background: rgb(202, 60, 60); /* maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* light blue */
}