확인이 있는 삭제 버튼 - 단계별 가이드

클릭 시 "삭제 확인"으로 변환되는 삭제 버튼을 만드는 방법에 대한 자습서 - CSS만 해당.

HTML

HTML의 경우 내부에 버튼과 두 개의 요소가 필요합니다. 첫 번째는 "CONFIRM DELETE"텍스트가 있는 범위 요소이고 두 번째는 삭제 svg입니다.

<button>
    <span>CONFIRM DELETE</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
</button>

CSS

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

위치를 상대적으로 설정하고 너비와 높이를 50x50픽셀로 설정하면 테두리 반경이 25픽셀로 설정된 원이 형성됩니다.
약간의 어두운 상자 그림자와 함께 테두리를 빨간색으로, 배경을 흰색으로 설정합니다.

그런 다음 커서를 포인터로 설정하고 오버플로를 숨김으로 설정하고 300ms로 전환합니다.

button {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 2px solid rgb(231, 50, 50);
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 0 10px #333;
    overflow: hidden;
    transition: .3s;
}

호버에서 배경색을 밝은 빨간색으로 변경하고 크기를 약간 늘리고 상자 그림자와 약간의 전환을 추가합니다.

button:hover {
    background-color: rgb(245, 207, 207);
    transform: scale(1.2);
    box-shadow: 0 0 4px #111;
    transition: .3s;
}

이제 삭제 svg의 스타일을 지정합니다.

색상은 버튼 테두리와 같은 빨간색으로 설정하고 transform 속성으로 절대 위치를 사용하여 중앙에 요소를 배치합니다.

마지막으로 약간의 전환을 추가합니다.

svg {
    color: rgb(231, 50, 50);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

호버에서 svg는 불투명도를 0에서 svg로 설정합니다.

트랜지션을 추가하면 이 사라지는 것이 멋지고 부드러워집니다.

button:focus svg {
    opacity: 0;
    transition: .3s;
}

버튼 내부의 텍스트 요소는 너비를 150px로 설정하고 중앙에 배치합니다(svg와 동일 - 변환 속성 사용).

불투명도를 0으로 설정하면 이 요소가 보이지 않습니다. 호버에 표시합니다(svg가 숨겨져 있을 때).

색상을 빨간색(svg 및 버튼 테두리와 동일한 빨간색)으로 설정하고 글꼴 두께를 300으로 설정하고 전환을 300ms로 설정합니다.

span {
    width: 150px;
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%);
    color: rgb(231, 50, 50);
    font-weight: 600;
    transition: .3s;
}

포커스에서 버튼의 너비를 150px(텍스트 요소와 동일)로 설정하고 높이를 50px로 설정합니다.

또한 전환을 300ms로 설정합니다.

button:focus {
    width: 150px;
    height: 50px;
    transition: .3s;
}

버튼 포커스에서 텍스트 요소의 불투명도를 1로 설정합니다.
전환을 300ms로 설정하면 부드럽게 나타납니다.

button:focus span {
    opacity: 1;
    transition: .3s;
}

그리고 그게 다야.

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

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