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.

Button

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>

Section Divider

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