CSS animations are not functioning properly on disabled Bootstrap buttons

Question

CSS animations are not functioning properly on disabled Bootstrap buttons

One issue I'm facing is with a BootStrap button that I'm rendering in React. The button has a property or a condition that determines if it's disabled:

  <Button bsClass="fill"
        disabled={!props.purchaseble}
        onClick={console.log("clicked!")}
        >Order now</Button>

The button functions correctly without the CSS class, but there is an unwanted animation when hovering over it, even when it's disabled:

Below is the CSS code for the button:

  .fill:hover {
    color: whitesmoke;
    cursor: pointer;

  }

  .fill:before {
    cursor: pointer;

    content: "";
    position: absolute;
    background: #5a320b;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }

  .fill:hover:before {
    cursor: pointer;

    top: 0;
  }

My question is whether these animations still work even when the button is disabled, and if there is a way to prevent the animations from appearing when the button is disabled?

html css reactjs twitter-bootstrap

Answer 1

Answer №1

Check out this example that shows the animation not being active when the button is disabled.

To achieve this, you can modify bsClass="fill" to something like

bsClass={this.state.isDisabled ? '' : 'fill'}

, which eliminates the CSS class animation when the button is disabled.

// Here's an example of a class component
class Container extends React.Component {
  constructor(props) {
    super(props);
    this.toggleDisabled = this.toggleDisabled.bind(this);
    this.state = { isDisabled: false };
  }
  
  toggleDisabled() {
    this.setState({ isDisabled: !this.state.isDisabled });
  }

  render() {
    return (
        <div>
          <button className={this.state.isDisabled ? '' : 'fill'}
            disabled={this.state.isDisabled}
          >Order now</button>
          <button onClick={() => { this.toggleDisabled(); }}>Click to toggle disabled</button>
        </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);

.fill:hover {
    color: whitesmoke;
    cursor: pointer;

  }

  .fill:before {
    cursor: pointer;

    content: "";
    position: absolute;
    background: #5a320b;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }

  .fill:hover:before {
    cursor: pointer;

    top: 0;
  }

<div id="parent"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

Check out this example that shows the animation not being active when the button is disabled.

To achieve this, you can modify bsClass="fill" to something like

bsClass={this.state.isDisabled ? '' : 'fill'}

, which eliminates the CSS class animation when the button is disabled.

// Here's an example of a class component
class Container extends React.Component {
  constructor(props) {
    super(props);
    this.toggleDisabled = this.toggleDisabled.bind(this);
    this.state = { isDisabled: false };
  }
  
  toggleDisabled() {
    this.setState({ isDisabled: !this.state.isDisabled });
  }

  render() {
    return (
        <div>
          <button className={this.state.isDisabled ? '' : 'fill'}
            disabled={this.state.isDisabled}
          >Order now</button>
          <button onClick={() => { this.toggleDisabled(); }}>Click to toggle disabled</button>
        </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);

.fill:hover {
    color: whitesmoke;
    cursor: pointer;

  }

  .fill:before {
    cursor: pointer;

    content: "";
    position: absolute;
    background: #5a320b;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }

  .fill:hover:before {
    cursor: pointer;

    top: 0;
  }

<div id="parent"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 3

Answer №2

Even with the button in a disabled state, the transition should still function properly. Feel free to refer to this example for guidance and don't hesitate to ask if you need clarification.

Note: Initially I misunderstood the question, but I have now adjusted the code to rectify that misunderstanding. By incorporating :not([disabled]), we can prevent the animation from executing when the element is designated as disabled.

.fill:not([disabled]):hover {
  color: whitesmoke;
  cursor: pointer;
}

.fill::before {
  cursor: pointer;
  content: "";
  position: absolute;
  background: #5a320b;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  -webkit-transition: top 0.09s ease-in;
}

.fill:not([disabled]):hover::before {
  cursor: pointer;
  top: 0;
}

  /* Set the button to be relative so the absolute pseudo element stays inside */
.fill {
  position: relative;
}

/* Place the text inside of a span so that it can sit in front of the pseudo element */
.fill > span {
  position: relative;
}

<button class="fill" disabled>
  <span>Look at me, I'm a disabled example!</span>
</button>

<br/>

<button class="fill">
  <span>Look at me, I'm a not disabled example!</span>
</button>

Answer 4

Even with the button in a disabled state, the transition should still function properly. Feel free to refer to this example for guidance and don't hesitate to ask if you need clarification.

Note: Initially I misunderstood the question, but I have now adjusted the code to rectify that misunderstanding. By incorporating :not([disabled]), we can prevent the animation from executing when the element is designated as disabled.

.fill:not([disabled]):hover {
  color: whitesmoke;
  cursor: pointer;
}

.fill::before {
  cursor: pointer;
  content: "";
  position: absolute;
  background: #5a320b;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  -webkit-transition: top 0.09s ease-in;
}

.fill:not([disabled]):hover::before {
  cursor: pointer;
  top: 0;
}

  /* Set the button to be relative so the absolute pseudo element stays inside */
.fill {
  position: relative;
}

/* Place the text inside of a span so that it can sit in front of the pseudo element */
.fill > span {
  position: relative;
}

<button class="fill" disabled>
  <span>Look at me, I'm a disabled example!</span>
</button>

<br/>

<button class="fill">
  <span>Look at me, I'm a not disabled example!</span>
</button>

CSS animations are not functioning properly on disabled Bootstrap buttons

Answer №1

Answer №2

Similar questions

Steps on removing a file type from a Material UI textfield

What is the best way to apply styling to a kendo-grid-column?

Exploring JQuery Mobile: A guide on looping through elements in a list and collecting their unique identifiers

When multiple files are used, .env does not return any values

Securing routes with server-side validation

Delay the occurrence of a hover effect until the previous effect has finished executing

Discover the nodes with the highest connections in a D3 Force Graph

Arrange a div element among the descendants of a neighboring div

Maintaining the original layout upon refreshing the page

Error: Dockerizing a React application resulted in a syntax error due to an unexpected token '<'

Eliminate any undefined data in the popup map of Javascript

Arranging the placement of list-group-item buttons

jQuery's click event on dynamically generated AJAX elements sometimes fails to trigger randomly

CSS will only be visible if it is enclosed within the <style> tag

What is the best way to assign a JavaScript return value to a PHP variable?

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

How to best handle dispatching two async thunk actions in Redux Toolkit when using TypeScript?

Utilizing Images as Backgrounds in JSP

Adjusting the height of a table column to accommodate lengthy text without disrupting the layout of adjacent columns

Creating JavaScript functions that accept three inputs and perform an operation on them