아름다운 호버 저장 버튼 - 수행 방법

HTML

HTML의 경우 버튼 텍스트가 포함된 span 요소와 버튼 요소 내부에 다운로드 svg만 있습니다.

<button>
    <span>SAVE</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
    </svg>
</button>

CSS

CSS의 경우 먼저 버튼 요소의 스타일을 지정합니다.

먼저 커서를 포인터로 설정하고 flexbox를 사용하여 내부 항목을 정렬하고 일부 패딩을 추가합니다.

그런 다음 배경색을 밝은 파란색으로 설정하고 버튼의 기본 테두리를 제거하고 약간 둥글게 설정하고 약간의 그림자를 추가합니다.

너비는 120픽셀, 글꼴은 굵게, 글꼴 크기는 16픽셀로 설정하겠습니다.

button {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: rgb(176, 206, 255);
    border: none;
    box-shadow: 0 0 5px #999;
    border-radius: 3px;
    width: 120px;
    font-weight: 600;
    font-size: 16px;
}

버튼 내부 텍스트의 경우 너비를 100퍼센트로 설정하고 오른쪽 테두리를 설정하여 아이콘과 구분합니다.

높이를 40픽셀로 설정하고 flexbox를 사용하여 텍스트를 중앙에 정렬합니다.

span {
    width: 100%;
    border-right: 1px solid rgb(77, 98, 131);
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

svg의 경우 왼쪽 패딩만 추가하겠습니다.

svg {
    padding-left: 10px;
}

가리키면 버튼의 배경색을 네온 그린으로 변경하겠습니다.

button:hover {
    background-color: rgb(0, 255, 102);
}

버튼을 가리키면 텍스트 너비를 0으로 설정하고 오버플로되는 모든 항목을 숨겨 마우스를 올리면 텍스트가 사라집니다.

또한 사라지는 것이 부드럽게 되도록 약간의 전환을 추가하겠습니다.

마지막으로 border 속성을 none으로 설정합니다.

button:hover span {
    width: 0%;
    transition: .2s;
    border: none;
    overflow: hidden;
}

버튼을 가리키면 svg를 100% 너비로 설정하고 왼쪽 패딩을 제거합니다.

button:hover svg {
    width: 100%;
    padding-left: 0;
}

그리고 그게 다야. ☺️

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다 ❤️