Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided.
https://i.sstatic.net/JgcbZ.jpg
I'm struggling to figure out how to position the lines on either side of the "OR" word. Would using the RemoveIcon
be appropriate for this situation?
Please take a look at my code sandbox for reference: CLICK HERE
<div className={classes.center}>
<Button
type="submit"
color="primary"
variant="contained"
className={classes.mb2}
>
Sign in
</Button>
</div>
<div className={classes.center}>
<RemoveIcon />
OR
<RemoveIcon />{" "}
</div>
<div className={classes.center}>
<Button type="button" variant="contained">
Sign in with Google
</Button>
</div>