JS Mastery has their sh*t together. What’s in this post is from the “Perfect Portfolio” project. How does he do it? This article takes a look at the “Button” and “SectionDivider” components.
The button has has a “ButtonFront” and “ButtonBack” where “ButtonBack” is just a flex container for the button.
We start with the “ButtonBack:”
background: ${({ alt }) => (alt ? "linear-gradient(270deg, #ff622e 0%, #B133FF 100%)" : "linear-gradient(270deg, #00DBD8 0%, #B133FF 100%)")};
ButtonFront:
background: ${({ alt }) => (alt ? "linear-gradient(270deg, #F46737 0%, #945DD6 100%)" : "linear-gradient(270deg, #13ADC7 0%, #945DD6 100%)")};
box-shadow: ${({ disabled }) => (disabled ? "inset 0px 2px 1px rgba(46, 49, 55, 0.15), inset 0px 0px 4px rgba(20, 20, 55, 0.3)" : "none")};
There are states for hover, focus, active, disabled and has changed for the two media query breakpoints. Look at the “ButtonFront” hover state:
&:hover {
opacity: 0;
}
This very interesting strategy. I’m not sure what is going on here. This is the hover state for both “ButtonFront” and “ButtonBack” yet there is clearly a hover effect? The starting normal state has an opacity of 1.
Interesting to see the button component setup with styled-components. A bit of overkill for a project this size but I’m happy to see. There is a “styles/GlobalComponents/Button.js” file which has:
const Button = (props) => (
<ButtonBack alt={props.alt} form={props.form} disabled={props.disabled}>{props.children}
<ButtonFront alt={props.alt} onClick={props.onClick} disabled={props.disabled}>{props.children} </ButtonFront>
</ButtonBack>
);
And the CSS styling is in the “styles/GlobalComponents/index.js” file.
The file is referenced in the “Hero.js” file with:
<Button onClick={props.handleClick}>Learn More</Button>
Interesting to see the divider is not on the bottom but on the top of the next component down.
export const SectionDivider = styled.div`
width: 64px;
height: 6px;
border-radius: 10px;
background-color: #fff;
background: ${props => (props.colorAlt ? "linear-gradient(270deg, #F46737 0%, #945DD6 100%)" : "linear-gradient(270deg, #13ADC7 0%, #945DD6 100%)")};
margin: ${props => (props.divider ? "4rem 0" : "")};
@media ${props => props.theme.breakpoints.md} {
width: 48px;
height: 4px;
}
@media ${props => props.theme.breakpoints.sm} {
width: 32px;
height: 2px;
}
`
And leveraged in “Projects.js” file like this:
<SectionDivider />