[CSS] hover 효과를 이용한 button

JUMPING으로 적혀있는 버튼을 페이지 중앙에 flex box를 사용해야 한다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #151b29;
}

위의 코드와 같이 입력했더니 버튼이 중앙에 위

치하게 되었다. 

 

 

 

호버 효과를 주기 전 상태의 버튼에 기본스타일을 추가해보겠다. 

일단 그렇게 하기 위해서 버튼의 기존 배경을 제거해 준다.

 

button {
    background: none;
    color: #ffa260;
    border: 2px solid;
    padding:1em 2em; 
    font-size: 1em;
}

    background: none;

기본 흰색 배경화면에서 투명?하게 배경색상을 없앴다. 

    color: #ffa260;

    border: 2px solid;

테두리를 색과 두께를 변경하기 위해 2px와 실선 테두리로 했다.

    padding:1em 2em;

테두리 사이에 여백을 추가 해기 위해 padding을 입력했다. 상하로 1em, 좌우로 2em을 입력했다.

    font-size: 1em;

본문 크기나 부모 요소에 따라 크기가 달라진다.

    transform: color 0.2s, border-color 0.2s, box-shadow 0.2s, tranform 0.2s;
    border-radius: 30px;

+ border-radious: 30px를 입력하여 버튼의 라운드 느낌을 주었다. 

+ 지속시간 또한 추가했다.

button {
    background: none;
    color: #ffa260;
    border: 2px solid;
    padding:1em 2em; 
    font-size: 1em;
    transform: color 0.2s, border-color 0.2s, box-shadow 0.2s, tranform 0.2s;
    border-radius: 30px;
}

 

hover  효과를 적용해보겠다.

button:hover {
    border-color: #f1ff5c;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
    transform: translateY(0.25em);
    cursor: pointer;
    border-radius: 30px;
}

    border-color: #f1ff5c;

테두리 색상을 변경하기 위해서 border-color을 입력하였다. 

    color: white;

글자의 색상을 바꾸기 위해 white 색을 입력했다. 

    box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;

이어서 그림자 효과를 넣어주기 위해 box-shaow를 입력했다. 0은 X값 0.5em은 Y값 0.5em은 흐림 값이다. 그리고 -0.4em은 번짐 범위 마지막으로 색상을 입력했다. 

    transform: translateY(0.25em);

변형 옵션을 사용하여 이동을 시켜줬다. 

    cursor: pointer;

커서를 포인터로 사용하였다. 

    border-radius: 30px;

추가로 버튼이 라운드 느낌을 주기 위해 30px를 입력했다. 

 

 

위의 동영상은 최종본이다.