Buttons not clickable inside div: believe it to be due to the svg background

Question

I have two buttons placed in a few layers of divs. Placing the buttons outside of the divs allows them to become clickable, but inside they are not. After some testing it seems to be the 'background' div that is preventing the clickable button, possibly due to an svg being used as the background behind the buttons? I have tried using z index with position:absolute with no luck. Also making the buttons visibility:visible

    .background {
    background-image: url(images/background.svg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    top:-76px;
    z-index: -1;

}

    .left-header {
    position: relative;
    top: 40vh;
    
}


    .btn-primary {
    margin-top: 30px;
    text-transform: uppercase; 
    font-family: Roboto;
    font-weight: 500;
    font-size: 15px;
    margin-right: 20px;
    transition: all 0.3s ease 0s;
    outline: none;    
    border-radius: 4px;
    display: inline-block;
    letter-spacing: .025em;
    line-height: 25px;
    cursor: pointer !important;
    

}

<div class="background">
            <div class="container left-header">
                <div class="row">
                    <div class="col">
                            <h1>hello.</h1>
                            <h2>some text</h2>
                            <button type="button" href="#!" class="btn btn-primary shadow"  id="but1">Create Account</button>
                            <button type="button" class="btn btn-primary shadow" id="but2">Contact Us</button>                  
                    </div>
                    <div class="col">
                        <div class="illustration"><img src="images/illustration.svg"></div>        
                    </div>
                </div>              
            </div>      
        </div>

.

I think that pointer-events:none; is causing the problem, why are you using it? — vitomadio, Sep 19 '18 at 17:33
Oh that was one of the solutions I found online that I forgot to remove, adding it and now removing it hasn't helped — Liam Thompson, Sep 19 '18 at 17:35

score 2 · Accepted Answer · answered Sep 19 '18 at 17:35

2

My guess is that the pointer-events: none on your background is causing the problem. Could you try adding pointer-events: all to the class btn-primary?

answered Sep 19 '18 at 17:35

That was a previous solution that didn't work that I forgot to remove. Adding pointer-events: all to button class isn't working either. (I have now removed pointer events from background) – Liam Thompson Sep 19 '18 at 17:42
1

Could you also try removing the z-index: -1 on the .background? – Sep 19 '18 at 17:49
That worked! the background z index was the issue, had to re arrange some things afterwards but that's the solution. Cheers! – Liam Thompson Sep 19 '18 at 17:56

Buttons not clickable inside div: believe it to be due to the svg background

1 Answers1