회전 효과가 있는 제출 버튼 - CSS만 해당 - 단계별

HTML

HTML의 경우 내부에 텍스트와 "체크"svg 요소가 있는 버튼이 필요합니다.

텍스트를 표시하고 svg를 숨깁니다.

버튼 포커스에서 svg를 표시하고 텍스트 요소를 숨깁니다.

<button class="submit_button">
    <span>Submit</span>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
    </svg>
</button>

CSS

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

flexbox를 사용하여 높이를 30픽셀로 설정하고 요소를 중앙에 정렬합니다.

이제 커서를 포인터로 설정하고 약간의 전환을 추가합니다.
마지막으로 텍스트와 테두리 색상을 변경하고 약간의 반경을 추가해 보겠습니다.

.submit_button {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .5s;
    color: rgb(196, 113, 62);
    border-color: rgb(196, 113, 62);
    border-radius: 2px;
}

초점이 맞으면 반경을 15픽셀로 설정합니다. 높이가 30픽셀이면 원이 형성됩니다.

버튼이 클릭 가능한 것처럼 보이지 않도록 커서를 기본값으로 설정합니다.

테두리와 텍스트 색상을 녹색으로 변경합니다.

720도(완전한 원 2개 - 360 * 2) 회전하고 전환을 추가하면 이 변경이 원활하게 이루어집니다.

.submit_button:focus {
    border-radius: 15px;
    cursor: default;
    border-color: rgb(99, 184, 33);
    color: rgb(99, 184, 33);
    transform: rotate(720deg);
    transition: .5s;
}

이제 "check"svg의 스타일을 지정할 것입니다.

이 요소는 버튼에 포커스가 있을 때만 표시됩니다.

너비를 0으로 설정하고 버튼 포커스를 15픽셀로 설정합니다.

약간의 전환을 추가하면 이 요소가 멋지고 매끄럽게 줄어들고 확장됩니다.

.submit_button svg {
    transition: .5s;
    width: 0;
}
.submit_button:focus svg {
    transition: .5s;
    width: 15px;
}

이제 텍스트 요소의 스타일을 지정합니다.

이 요소는 버튼에 포커스가 없을 때만 표시됩니다.

이를 위해 너비를 50px로 설정한 다음 버튼 포커스에서 0픽셀로 설정합니다.

텍스트가 커지는 것처럼 보이도록 포커스에서 글꼴 크기를 0으로 설정해 보겠습니다.

전환을 설정하면 원활하게 진행됩니다.

.submit_button span {
    transition: .5s;
    width: 50px;
}
.submit_button:focus span {
    transition: .5s;
    width: 0;
    font-size: 0;
}

그리고 그게 다야.

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

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