我有一个CSS类,使我的链接看起来像漂亮的按钮.我希望能够将相同的样式应用于“提交”按钮,并使它们看起来也一样.最棘手的部分是锚标记必须在其中具有跨度,我认为使用表单提交按钮是不可能的.有人知道我如何使“提交”按钮与链接匹配吗？
这是CSS：
a.button {
background: transparent url('images/all_pages/bg_button_a.jpg') no-repeat scroll top right;
color: #FFF;
display: block;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('images/all_pages/bg_button_span.jpg') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:hover {
background-position: bottom right;
}
a.button:hover span {
background-position: bottom left;
}
谢谢！
最佳答案
尝试使用< button>标记,而不是< input type =“ submit”>. < button>标签可让您嵌套< span>之类的元素,并通常为您提供更多的样式自由.
原文链接：https://www.f2er.com/css/530721.html切换表单的提交按钮后,即可使用< button>标签,然后可以将相同的CSS应用于链接和按钮：
a.button,button {
/* ... */
}
a.button span,button span {
/* ... */
}
a.button:hover,a.button:focus,button:hover,button:focus {
/* ... */
}
a.button:hover span,a.button:focus span,button:hover span,button:focus span {
/* ... */
}
为了提高可访问性,上述：hover样式的每个块也扩展为包括：focus状态.
这是一篇有关使用< button>标签：http://particletree.com/features/rediscovering-the-button-element/
