我正在努力使按钮看起来像我想要的那样。我设法做到了这一点，但问题是要求我使用 javascript 发布表单，这完全破坏了该网站的可访问性。
所以，我想知道如何使用 <input type"submit" /> 获得相同的效果同时在所有按钮上保持鼠标悬停效果，而不仅仅是文本(我的第一个解决方案有这个问题)。
这是按钮的外观(您还可以看到鼠标悬停效果):
在这里你可以找到一个 fiddle :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" /> ，但在那种情况下，我不知道如何在图像上放置文本。
感谢任何建议
最佳答案
这是可能的，但不同浏览器的问题。简单的方法是将您的文本包含在图像中。并使用sprite技术实现悬停效果。
关于html - 如何将按钮转换为这种样式的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14191478/