pbu pbu - 9 months ago 45
CSS Question

PureCSS button href link not working

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?

enter image description here

My button CSS is like this:

* 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-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 Source

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>