CSS 연습 - 4

1. 구현해야 할 것

https://uiverse.io/ShrinilDhorda/wicked-lionfish-83

 

 이번에 구현할 것은 위의 버튼이다. 해야할 것을 정리하자면 다음과 같다.

• 버튼의 기본 모양
• 마우스를 올렸을 때 변화하는 모양
• 버튼 밑에 반사되는 모양

 

2. 구현

2-1. 버튼의 기본 모양

 버튼의 기본 모양에서 신경써야 할 부분들이다.

• 버튼의 배경색
• 버튼의 글자색
• 버튼의 그림자색

배경색과 글자색, 그림자색의 색상 코드를 잘 모르기에 배경색은 black으로, 글자색은 white, 그림자색은 blue로 설정하였다. 작성한 코드는 다음과 같다.

import styled from "styled-components";

const Container = styled.div`
  width: 80%;
  min-width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const MyButton = styled.button`
  width: 180px;
  height: 60px;
  background-color: black;
  color: white;
  font-size: 22px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0px 0px 10px blue;
`;

export default function Button04() {
  return (
    <>
      <Container>
        <MyButton>WATCH</MyButton>
      </Container>
      <Container></Container>
    </>
  );
}

그림자색이 생각했던 것과는 많이 다르지만, 전체적으로 비슷한 느낌이라 생각한다. 이 단계의 코드는 별 것이 없었다. width, height 값은 측정을 해보니 대략 180px, 60px이었으며  background-color, color, font-size 등 크게 어려움이 없었다.

 

2-2. 마우스를 올렸을 때 변화하는 모양

 마우스를 올렸을 경우 변하는 것은 배경색과 글자색, 두 가지이다. 글자색은 단순히 하얀 색에서 검은색에서 하얀색으로 변하지만 배경색은 검은색에서 파란색과 검은색이 섞인 오묘한 색으로 바뀐다. 정확히 말하면 왼쪽은 파란 느낌이 나는 색으로, 오른쪽은 검은 느낌이 나는 색으로 변한다. 이는 linear-gradient를 이용하면 구현할 수 있을 것이다. 마우스가 올려졌을 때를 구현한 코드는 다음과 같다.

const MyButton = styled.button`
  width: 180px;
  height: 60px;
  background-color: black;
  color: white;
  font-size: 22px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0px 0px 10px blue;
  transition: all 1s;

  &:hover {
    background: linear-gradient(90deg, skyblue, gray);
    color: black;
  }
`;

마우스를 올렸을 때, 배경이 좌우 다른 색을 가지는 것을 background: linear-gradient(90deg, skyblue, gray);를 통해 구현하였다. 원래는 gray가 아니라 black으로 구현했으나, 글자의 색 역시 black이라 WATCH라는 글자가 잘 안보였다. 그래서 gray로 임의로 변경하였다.

 

2-3. 버튼 밑에 반사되는 모양

 샘플 버튼을 보면 마치 물표면에 버튼이 비치듯이 반사되어 보이는 것을 확인할 수 있다. 물론 before, after나 다른 div를 통해 어떻게든 똑같이 구현하면 될 것 같지만 뭔가 다른 방법이 있을 것 같다. 

const MyButton = styled.button`
  margin-top: 10px;
  width: 180px;
  height: 60px;
  background-color: black;
  color: white;
  font-size: 22px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0px 0px 10px blue;
  transition: all 1s;
  -webkit-box-reflect: below 20px
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 7));

  &:hover {
    background: linear-gradient(90deg, skyblue, gray);
    color: black;
  }
`;

반사되는 것처럼 표현할 수 있는 방법을 구글링해보니 -webkit-box-reflect라는 것이 있었다. -webkit-box-reflect는 유리에 반사되는 것과 같은 느낌을 줄 수 있게 해준다. -webkit-box-reflect는 순서대로 3개의 값을 받는다. 우선은 반사될 방향이다. mdn에 따르면,  above(위), below(밑), left, right가 있다. 현재 샘플 버튼에서는 아래에 반사된 모양이 보이므로 below를 적용해야 한다. 두 번째로 입력받는 값은 원본과 얼마나 떨어져있을 것인지를 나타내며, 위의 코드에서는 적당히 20px로 설정하였다. 마지막으로는 어떤 느낌을 줄지 정할수 있는 값으로 이 부분은 잘 모르기에 적당한 값을 설정하였다. 

 

3. 샘플 버튼 분석

const SampleButton = styled.button`
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  border: none;
  outline: none;
  border-radius: 0.4rem;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgb(14, 14, 26);
  color: rgb(234, 234, 234);
  font-weight: 700;
  transition: 0.6s;
  box-shadow: 0px 0px 60px #1f4c65;
  -webkit-box-reflect: below 10px
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));

  &:active {
    scale: 0.92;
  }

  &:hover {
    background: rgb(2, 29, 78);
    background: linear-gradient(
      270deg,
      rgba(2, 29, 78, 0.681) 0%,
      rgba(31, 215, 232, 0.873) 60%
    );
    color: rgb(4, 4, 38);
  }
`;

export default function Button04() {
  return (
    <>
      <Container>
        <MyButton>WATCH</MyButton>
      </Container>
      <Container>
        <SampleButton>Watch</SampleButton>
      </Container>
    </>
  );
}

 오늘은 샘플 코드와 거의 비슷하게 코드를 작성한 것 같다. 하지만 둔감하게도 처음 샘플 버튼을 눌러봤을 때 크기가 변한 것을 느끼지 못했기에 active일 때 scale을 변경해주지 않았다. -webkit-box-reflect도 거의 비슷하게 적용을 하였다. 다른 점이라면 -webkit-box-reflect의 마지막 rgba의 값이 살짝 달랐다는 것이다. 각설하고, 이 버튼의 구조는 다음과 같다. 우선 기본 상태의 버튼의 스타일을 정한 후, -webkit-box-reflect를 이용해 바닥에 반사되는 모습을 보인다. 그리고 hover일 때, 배경색은 background: linear-gradient~를 이용해 다른 색이 공존하는 느낌을 주었다. 그리고 이는 transition: 0.6s;를 이용해 애니메이션을 설정하였다. 또한, active일 때 scale 값을 지정해주어 마치 버튼이 실제로 눌리는 듯한 느낌을 주었다. 

 오늘의 버튼은 크게 어렵지 않았다. 그리고 -webkit-box-reflect라는 것을 배울 수 있었다. 이 속성은 꽤나 유용하게 이용할 수 있을 것 같다.

---

-webkit-box-reflect: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect