The button is disabled once inline CSS is applied to it

Question

The button is disabled once inline CSS is applied to it

I was having issues with the CSS of my buttons being overridden by the user agent stylesheet. To fix this, I used inline CSS to override it. However, a new problem emerged where the buttons became unclickable. Here is the code I am using. Any assistance would be greatly appreciated!

<button class="register-continue-with-google register-continue-with" >Sign Up with Google</button>

Before applying inline CSS

<button class="register-continue-with-google register-continue-with" style="background-color: transparent; border-color: transparent;">Sign Up with Google</button>

After applying inline CSS

html css vue.js

Answer 1

Answer №1

Contrary to what you may think, the button is still functional even though it appears invisible until given a specific function. Check out the example below -

test = () => {
document.getElementById('testdiv').style.backgroundColor='blue';
};

#testdiv {
    background-color: red;
    width: 100px;
    height: 100px;
}

button {
cursor:pointer;
}

<div id="testdiv"></div>
        <button
            class="register-continue-with-google register-continue-with"
            style="background-color: transparent; border-color: transparent"
            onclick="test()"
        >
    <br />
            Click me!
        </button>

You can include-

cursor:pointer;

in the button's CSS to make it visually clickable like a link.

Answer 2

Contrary to what you may think, the button is still functional even though it appears invisible until given a specific function. Check out the example below -

test = () => {
document.getElementById('testdiv').style.backgroundColor='blue';
};

#testdiv {
    background-color: red;
    width: 100px;
    height: 100px;
}

button {
cursor:pointer;
}

<div id="testdiv"></div>
        <button
            class="register-continue-with-google register-continue-with"
            style="background-color: transparent; border-color: transparent"
            onclick="test()"
        >
    <br />
            Click me!
        </button>

You can include-

cursor:pointer;

in the button's CSS to make it visually clickable like a link.

The button is disabled once inline CSS is applied to it

Answer №1

Similar questions

Ways to stop the floating label from blending with the input field

Utilizing a StyledComponents theme within a Component

What is the best way to limit the number of visitors allowed on a webpage?

Stylish curved bottom border

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

What could be the reason for lxml not being able to locate this class?

Inline CSS not appearing correctly upon initial page load

I seem to be having trouble getting innerHTML to function properly

Exploring depths with nested ng-Repeat in Depth First Search

Resolving Unrecognized Vue Variable in PhpStorm

Reactive property in the Vue composition API

Having trouble integrating the css and js animation files into my Django project

Creating a modal component in VueJs integrated with Laravel

What is the best way to alternate between two CSS stylesheets when using jQuery-UI?

Guide to creating a nested list using the jQuery :header selector

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

Slider Carousel for Multiple Items: Horizontal Orientation

Is it possible to define a 2-D array using the ref( ) function in VueJS?

Methods to display "typing" text while users are typing in Vue.js

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?