단추를이 스타일 단추로 변환하는 방법

단추 모양을 원하는대로 설정하려고합니다. 나는 이것을 할 수 있었지만, 문제는 내가 양식 ()을 게시하기 위해 javascript를 사용하도록 요청했다. 이것은이 웹 사이트에 대한 접근성을 완전히 망가 뜨리고있다.단추를이 스타일 단추로 변환하는 방법

그래서, 내가 모든 버튼에 마우스를 가져가 효과를 유지하면서 <input type"submit" />를 사용하여 동일한 효과를 얻을 수있는 방법을 알고 싶습니다, 텍스트가 아닌 단지 (내 최초의 솔루션은이 문제를 가지고 있었다). 당신이 바이올린 찾을 수

Button styled with mouseover effect

: 여기

은 (당신이 또한 효과를 통해 마우스를 볼 수 있습니다) 버튼을 보여야하는 방법이다 http://jsfiddle.net/FireDragonDoL/hjC7P/

을 그리고 여기에 코드입니다 :

HTML

<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div class="nothing"> 
     <div class="button"><span><span>Leggi tutto</span></span></div><br /><br /> 
    </div> 
    <div class="container"> 
     <div class="button"><span><span>Leggi tutto</span></span></div><br /><br /> 
    </div> 
    </body> 
</html>

CSS

* { 
    outline:none; 
    border:0; 
} 
body { 
    margin:0; 
    font-family:Georgia, "Times New Roman", Times, serif; 
} 
a { 
    color:#750e0e; 
    text-decoration:none; 
} 
a.reverse-color { 
    color: #D6D6B0; 
    text-decoration: none; 
} 
.container .button { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent; 
} 
.container .button span { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent; 
} 
.button { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 1px 0 transparent; 
    border: 0 none; 
    cursor: pointer; 
    height: 60px; 
    margin: 0; 
    overflow: visible; 
    padding: 0 0 0 15px; 
    width: auto; 
    float:right 
} 
.button span { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 100% 0 transparent; 
    color: #750E0E; 
    float: left; 
    font-size: 14px; 
    font-weight: bold; 
    height: 60px; 
    text-align: center; 
    text-shadow: 0 1px #D7E9A4 !important; 
    white-space: nowrap; 
    text-shadow:1px 1px #FFFFFF; 
} 
.button:hover span { 
    color:#333; 
} 
.button span span { 
    line-height: 52px; 
    padding: 0 20px 0 0; 
} 
.button:hover { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent; 
} 
.button:hover span { 
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent; 
} 
.container, .nothing { 
    clear: both; 
    overflow:hidden; 
    padding:10px 0; 
}

실제로 버튼 배경의 큰 이미지를 사용하고있는 유일한 아이디어, (넓은 가능성) 및 <input type="image" />를 사용하지만,이 경우에 나는 방법을 모른다 이미지 위에 텍스트를 놓습니다.

의견을 보내 주시면 감사하겠습니다.

출처

2013-01-07 Fire-Dragon-DoL

현재로서는 단일 html 요소를 통해이를 수행 할 방법이 없습니다. 어쩌면 :before 및 :after으로 처리하거나 position: relative으로 처리 할 수 있습니다.

지금 자바 스크립트 코드를 사용하여 해당 항목을 "제출"버튼으로 변환합니다.

출처

2013-01-24 13:12:32

다른 브라우저에서 문제가 발생할 수 있습니다. 간단한 방법은 이미지에 텍스트를 포함시키는 것입니다. 호버 효과에 스프라이트 기술을 사용하십시오.

출처

2013-01-07 07:24:53

필자는 CSS로 충분한 스킬을 놓친 것이 잘못이라고 생각했지만, 자바 스크립트를 사용할 수는 있습니다. 그러나 버튼이 많기 때문에 이미지에 텍스트 **를 넣고 싶지 않습니다. –

좋습니다. 당신은 이것을 할 수 있지만 모든 브라우저 위치가 같지 않기 때문에 약간의 코드를 작성해야합니다. 당신이 IE 브라우저를위한 몇몇 특징 탐지에 그 후에 원하는 경우에 여기에서 아주 좋은 웹 사이트 연결은이다 : http://www.quirksmode.org/css/condcom.html –

그렇습니다 나는 아직도 그것에 일하기 위하여려고하고있다, 나는에 전혀 모른다 css와 단일 입력 태그를 통해이 결과를 얻는 방법. –

단추를이 스타일 단추로 변환하는 방법

답변

관련 문제