input button no longer working when I add a style class

Question

$(document).ready(function(){
  $(".button2").click(function(){
    alert("clicked")
  });
});

[type='button'].button2 {
    background: white;
    color: black;
    margin-left: 31%;
    font-weight: bold;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://google.com">
 <input type="button" class="button2" value="Start Browsing!" />
 </form>

My button is not clickable anymore when I add a class to it. How do I fix this? Thanks!

HTML

`<form action="https://google.com">
 <input type="button" class="button2" value="Start Browsing!" />
 </form>`

CSS

`[type='button'].button2 {
    background: white;
    color: black;
    margin-left: 31%;
    font-weight: bold;
 }`

I tried adding a 'div' instead of a class but this also didn't work.

I have another button on the page in which I'm using <input type="submit"... but I want this button to be styled differently to that one so changed this one to submit isn't an option

Answer 1

What do you mean by 'not clickable'? I tried to add a JavaScript function, and it's showing that the button click action is still being called as you can see below:

CSS

<style>
[type='button'].button2 {
    background: white;
    color: black;
    margin-left: 31%;
    font-weight: bold;
 }
</style>

HTML with JS Function

<input type="button" class="button2" value="Start Browsing!" onclick="alert('click button')" />

if you tried above code actually the button already clicked and showing the alert.

if you mean by 'not clickable' is the button standard hover effect, you may use below CSS for your button hover effect

<style>
[type='button'].button2 {
    background: white;
    color: black;
    margin-left: 31%;
    font-weight: bold;
    cursor: pointer;
 }
 
 [type='button'].button2:hover{
    background: #E7E7E7
 }
 
</style>

and if you want to execute the form action by pressing the button, you may need to change the type from button to submit

as below

<form action="https://google.com">
 <input type="submit" class="button2" value="Start Browsing!" />
 </form>

and the css should be something like below

input[type=submit].button2 { YOUR CSS HERE }

Hope its help you :)