CSS 버튼 슬라이딩 도어

Question

CSS의 슬라이딩 도어 기술로 버튼을 스타일링하려고하지만 제대로 작동하지 않습니다. 현재 Firefox 3에만 액세스 할 수 있으므로이 문제는 다른 브라우저에서는 발생하지 않을 수 있지만 Firefox에 대해서도 해결하고 싶습니다.

다음은 문제가 무엇인지에 대한 그림입니다.

http://img131.imageshack.us/img131/3559/buttons.png

보시다시피 두 번째면은 픽셀에 의해 첫 번째보다 낮으며 충분히 끝나지 않습니다. 다음은 내가 사용하는 코드입니다.

button
{
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button span
{
    display: block;
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}


<a href="http://localhost"><button class="important" type="button"><span>Register</span></button></a>
<button type="submit"><span>Submit</span></button>

이 문제를 해결하려면 어떻게해야합니까? 상단 : -1px 오른쪽 : -3px를 사용하여 스팬을 상대적으로 배치하려고 시도했지만 텍스트는 잘못 정렬됩니다.

감사.

Answer 1

버튼의 패딩을 0으로 설정 한 다음 왼쪽과 너비를 패딩 왼쪽과 너비로 재생하여 텍스트를 올바른 위치에 놓으십시오.

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }

HTML 블록 디스플레이를 보면 : 패딩이 물체의 전체 너비에 추가되고 배경이 패딩 영역에서 시작되고 오른쪽 절반이 패딩됩니다.

그러나 그 점에 유의하십시오 버튼 요소는 다른 노드를 내부에 포함시키는 데 적합하지 않습니다. (스팬처럼). 그들은 브라우저에서 잘 작동 할 수 있지만, 즉, 당신의 삶을 정말 어렵게 만들 수 있습니다 (내가 아는 한, 그것은 유효하지 않다는 것은 말할 것도없이).

Answer 2

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

방금 DIV 배경에 문을 슬라이딩 했고이 사이트의 코드는 완벽하게 작동했습니다.

Answer 3

버튼과 같은 형태의 요소는 항상 스타일이 어렵고 이와 같은 사소한 버그로 수수께끼입니다.

클래스를 버튼 요소 자체에 적용하는 대신 버튼 스타일을 실제 버튼 내부의 여분의 스팬 요소에 적용해보십시오.

요컨대 :

button {
background: white;
border: 0;
}

button div {
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button div div {
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}

및 HTML :

<button type="submit"><div><div>Submit</div></div></button>

Answer 4

나는 버튼 대신 div를 사용하고 그것을 내내 빌드 할 기능이 있습니다. 다음과 같이 보입니다.

Alt Text http://fb.staging.moveable.com/samplebutton.gif

인라인 스크립트 호출 :

<script type='text/javascript'>makeButton("Log in","login()")</script>

---

암호:

function makeButton(text,action) {      
    document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}

CSS :

a.titleGen, .btnText, .btnGText {
    text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
    text-decoration:none
}

.btn {
    height:22px;
    display:inline;
    cursor:pointer;
    margin-right:5px;
}
.btnLeft {
    background-image:url(/images/bg_btnLeft.gif);
    width:3px;
    height:22px;
    float:left;
}
.btnRight {
    background-image:url(/images/bg_btnRight.gif);
    width:5px;
    height:22px;
    float:left;
}
.btnMiddle {
    background-image:url(/images/bg_btnMiddle.gif);
    width:auto;
    height:22px;
    float:left;
}
.btnText {
    color:#ffffff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:2px;
    padding-left:10px;
    padding-right:10px;
}