Search code examples
htmlcssbuttonsvgclickable

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


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>

.


Solution

  • 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?