완벽한 CSS 사이다 - 슬라이딩 도어 버튼

반응형

여기 큰 글씨! 미닫이는 꽤 오래된 기술이다. 웹에서 시간을 보냈지만, 요즘 그것이 가장 현명한 방법은 아닐 것이다. 우리는 현재 테두리 반지름과 경사진 배경 등을 가지고 있습니다. 이것은 미닫이문의 시대에 우리가 성취하고자 했던 것의 대부분을 열어줍니다.

하지만 작동 방식을 문서화하는 것은 여전히 즐겁습니다.

<a href="#" class="button">
    <span>Sliding Doors Button</span>
</a>

.button {
    float: left;
    clear: both;
    background: url(RIGHT_SIDE.png) top right no-repeat;
    margin: 5px;
    padding-right: 20px;
    color: white;
    text-decoration: none;
}
.button span {
    background: url(LEFT_SIDE.png) top left no-repeat;
    line-height: 22px;
    padding: 7px 0 5px 18px;
    display: block;
}
.button:hover {
    background-position: right -34px;
}
.button:hover span {
    background-position: 0 -34px; color: #fff;
}

이는 다음과 같은 그래픽을 가정한 것입니다.