React - Hover Button?-CodePudding

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" />

CodePudding user response：

in your button.css add

button::hover {
  css declarations;
}

CodePudding user response：

Just use react-bootstrap components. The button of it already has a hover effect in default state: https://react-bootstrap.github.io/components/buttons/

CodePudding user response：

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.