Feel free to choose any color provided by semantic-ui, for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button will look like this:
https://i.stack.imgur.com/nA3JF.png
If you want to add inverted styling, use the additional props provided by react semantic-ui:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
This will change the appearance of your component to:
https://i.stack.imgur.com/Ni8YL.png
Hovering over the button will revert it back to its original style if inverted.
Enhancing components with styled components and react semantic ui
I suggest utilizing styled-components to easily customize semantic-ui styles:
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Replace the original semantic-ui component with your newly styled one:
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>