PureCSS button href link not working - css

Question

I am using purecss to create colored buttons, href is not clickable and working. The button appears fine its just the link that is cause the trouble.
<button class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</button>
I am not able to click the button. Why is this not working?
The button is a large one and looks like this. Please how can i fix this?
My button CSS is like this:
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.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); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}

Answer 1

The href is just '#', which is a blank placeholder for anchor tags in HTML. The easiest solution is to just wrap your button in an <a> tag. For example:
<a href="http://www.google.com">
<button class='my-class'>Find out more details!</button>
</a>

Answer 2

There isn't a href attribute on a button, you would either have to add an onClick="" event or use a simple anchor tag
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
.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); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
<a class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' >Find out more details</a>

Answer 3

For me, this works: http://jsfiddle.net/ysv75326/1/
All I've done is changed the <button> into <input type="button"... and given it an ID of test. Then I set up a JavaScript listener for when an element with this ID gets clicked, it runs alert("Hey");
Code Snippet:
$("#test").click(function() {
alert("Hey");
});
.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);
/* this is a green */
}
.button-error {
background: rgb(202, 60, 60);
/* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20);
/* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class='pure-u-1 pure-button pure-button-primary pure-u-md-2-5 button-xlarge' href='#' id="test" value="Find out more details">