친구 추가 버튼 - 단계별 가이드

HTML

HTML의 경우 내부에 두 개의 범위가 있는 div 요소가 필요합니다. 하나는 "+"텍스트가 있고 다른 하나는 "친구 추가"텍스트가 있습니다.

이제 클래스, "버튼"을 div 요소로, "플러스"를 "+"텍스트가 있는 스팬 요소로, "텍스트"클래스를 "친구 추가"텍스트가 있는 스팬 요소로 설정합니다.

<div class="button">
    <span class="plus">+</span>
    <span class="text">Add Friend</span>
</div>

CSS

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

기본 스타일, 배경, 테두리, 색상 등을 설정합니다.

테두리 반경이 25픽셀인 원을 형성하는 너비와 높이를 50픽셀로 설정합니다.

flexbox를 사용하여 요소를 중앙에 정렬합니다.

이제 약간의 전환을 추가하고 오버플로되는 모든 것을 숨기고 커서를 포인터로 설정합니다.

.button {
    background-color: rgb(78, 180, 203);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
}

아웃 스팬 요소의 경우 위치를 절대값으로 설정하고 약간의 전환을 추가합니다.

.plus, .text {
    position: absolute;
    transition: .3s;
}

div hover에서 너비를 100px로 설정하고 300ms로 전환합니다.

.button:hover {
    width: 100px;
    transition: .3s;
}

div 마우스를 올리면 불투명도를 0으로 설정하여 "+"텍스트가 있는 범위 요소를 숨깁니다.

또한 부드럽게 사라지도록 전환을 설정합니다.

.button:hover .plus {
    opacity: 0;
    transition: .3s;
}

"친구 추가"텍스트가 있는 요소에 불투명도를 0으로 설정합니다. 이 요소는 div 마우스를 올리면 나타납니다(더하기 기호가 사라질 때).

.text {
    opacity: 0;
}

div 마우스를 올리면 "텍스트"클래스를 사용하여 범위에서 불투명도를 1로 설정합니다.

약간의 전환으로 매끄럽게 나타납니다.

.button:hover .text {
    opacity: 1;
    transition: .3s;
}

그리고 그게 다야.

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

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