How to make a invisible clickable button-CodePudding

<!-- Log out Button -->
            <form  method = "POST" action = "home.html"> {%csrf_token%} <button type="submit" > Logout</button> Logout</form> 


            <a href="{% url 'login' %}" >LOG OUT</a>

enter image description here

How do I convert the 1st button type to the 2nd button type. From the image i am trying to convert my left log out button to my right logout button.

so that it execute the logout {%csrf_token%} on the right log out button.

I tried to make the button hidden from the form but it will not be clickable.

CodePudding user response：

another possible way

.invisible-button{
  visibility: hidden;
  }

<button type="submit" >Logout</button>

CodePudding user response：

One possible way to do it is:

In your html:

<button type="submit" >Logout</button>

In your CSS:

.invisible-button {
    opacity: 0;
}

CodePudding user response：

If you want to keep the code as it is, check out Zakk´s solution. Otherwise you could also just remove the Logout from the form (Not the one in the button) and apply all the styles you have for your form to your button.