import React, { useState } from "react"; import FormInput from "./FormInputs"; function Form() { const [conditionButton, setCondition] = useState(false); function getStateOver() { setCondition(true); } function getStateOut() { setCondition(false); } return ( <form className="form"> <FormInput type="text" placeholder="Username" /> <FormInput type="password" placeholder="Password" /> <button type="submit" style={ conditionButton ? { background: "black" } : { background: "white" } } onMouseOver={getStateOver} onMouseOut={getStateOut} > Login </button> </form> ); } export default Form;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter