정보 가리키기 버튼 - 자습서

HTML

HTML의 경우 내부에 "i"와 "nfo"라는 두 개의 범위가 있는 버튼이 있습니다. 버튼을 가리키면 "Nfo"가 표시됩니다.

<button>
    <span>i</span>
    <span class="nfo">NFO</span>
</button>

CSS

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

몇 가지 색상을 설정하고 테두리, 너비 및 높이를 30px로, 테두리 반경을 15px로 하면 원이 만들어집니다.

flexbox를 사용하여 요소를 중앙에 배치하고 전환을 추가하여 나중에 광고할 호버 효과가 멋지고 부드럽게 나타나도록 합니다.

button {
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: rgb(255, 128, 0);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
}

"nfo"클래스에 대해 너비와 불투명도를 0으로 설정하고 300밀리초로 전환합니다.

.nfo {
    width: 0px;
    transition: .3s;
    opacity: 0;
}

버튼을 가리키면 "nfo"클래스를 선택하고 너비를 20px로, 불투명도를 다시 1로 설정하고 전환을 설정하여 이 너비 변경이 원활하도록 합니다.

button:hover .nfo {
    width: 20px;
    transition: .3s;
    opacity: 1;
}

마지막으로 호버의 버튼 요소에서 너비를 늘리고 전환을 설정합니다.

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

그리고 그게 다야.

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

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