React - Hover Button?

user_13982692 0
Viewed 77

How can I create a Button with hover effect I can't really get it and I have used bootstrap Button Component:

import React from "react";
import "./button.css";

const Button = ({ title, colorStyle }) => {
  return (
    <>
      <button type="submit" className={colorStyle}>
        {title}
      </button>
    </>  );
};

export default Button;

And import line is:: <Button title="Shop" colorStyle="bg-dark text-white" />

react-bootstrap reactjs hover css
3 Answers

in your button.css add

button::hover {
  css declarations;
}
user_130811080
user_59804130

Well, the hover effect has nothing to do with react. What you can do is rely on plain old CSS for this. The class that you have added on the button can use used to do this. Your code would look something like this if you wanted a background-changing effect.

bg-dark {
 background: black;
}

bg-dark:hover {
 background: red;
}

In the above example, your button's background colour will switch to red on hover.

Let me know if you have any follow up questions.

user_88950770
Related