Fatal编程技术网
  • html/
  • Html 如何将按钮转换为此样式的按钮

Html 如何将按钮转换为此样式的按钮

html css

Html 如何将按钮转换为此样式的按钮,html,css,Html,Css,我正在试着让一个按钮看起来像我想要的。我设法做到了这一点，但问题是要求我使用javascript发布表单，这完全破坏了该网站的可访问性 因此，我想知道如何通过使用在所有按钮上保持鼠标悬停效果，而不仅仅是文本（我的第一个解决方案有这个问题）来获得相同的效果 下面是按钮的外观（您也可以看到鼠标悬停的效果）： 在这里你可以找到一把小提琴： 下面是代码： HTML <html> <head> <title>Test</title> <

我正在试着让一个按钮看起来像我想要的。我设法做到了这一点，但问题是要求我使用javascript发布表单，这完全破坏了该网站的可访问性

因此，我想知道如何通过使用
在所有按钮上保持鼠标悬停效果，而不仅仅是文本（我的第一个解决方案有这个问题）来获得相同的效果

下面是按钮的外观（您也可以看到鼠标悬停的效果）：

在这里你可以找到一把小提琴：

下面是代码：

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>
我唯一的想法是实际使用按钮背景的大图像（可能更宽），并使用
，但在这种情况下，我不知道如何在图像上放置文本

任何建议都可以，但不同的浏览器有问题。简单的方法是将文本和图像结合起来。并使用精灵技术来实现悬停效果。

目前，没有一种方法可以通过单个html元素来实现这一点。可以使用
：在
之前和
：在
之后，或者也可以使用
位置：相对


目前，我将坚持使用javascript代码将这些项目转换为“提交”按钮。
我认为这只是我自己在css方面缺乏足够技能的一个错误。。。但是，如果是这样的话，我可以坚持使用javascript。但是我不想把文本放在图像中，因为我有很多按钮。您可以这样做，但必须编写一些额外的代码，因为所有浏览器位置都不相同。如果你想对IE浏览器进行一些功能检测，那么这里有一个非常好的网站链接：是的，我将使用它，但是我不知道如何通过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;
}