使用CSS的输入按钮，单张图片翻转

当使用图片作为按钮时，它会提供大量有关如何将CSS和静态按钮作为翻转使用的信息。使用CSS的输入按钮，单张图片翻转

我的问题是，你将如何去改变每个鼠标事件（在按钮上）的按钮，如果你使用一个图像的所有状态？

比如......我有以下HTML我的按钮

<input type="image" id="login_submit" name="login_submit" src="button_login.png" />

和独立于这一点，我有以下的CSS，我以前用过...

#login_submit a { 
    outline: none; 
    text-indent: -5000px; 
    display:block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 141px; 
    height: 36px; 
    background: url("button_login.png") 0 0 no-repeat; 
} 
#login_submit a:hover { 
    background-position: -141px 0; 
} 
#login_submit a:active { 
    background-position: -282px 0; 
}

现在明显它现在不会工作......所以我会怎么做呢？我正在寻找一种更纯粹的CSS解决方案，所以没有JS能够让这一天变得更加美好。

或者我应该坚持每个州有2/3个单独的按钮吗？

来源

2012-05-29 svict4

好，主要问题似乎是，你想样式锚这是一个孩子“#login_submit”，而不仅仅是“#login_submit”，试试这个：

#login_submit { 
    outline: none; 
    text-indent: -5000px; 
    display:block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 141px; 
    height: 36px; 
    background: url("button_login.png") 0 0 no-repeat; 
} 
#login_submit:hover { 
    background-position: -141px 0; 
} 
#login_submit:focus { 
    background-position: -282px 0; 
}

祝你好运，狮子座

来源

2012-05-29 01:47:41 leopic

我认为这应该工作，但src属性可能需要从输入元素中删除。 –

完全正确的，它需要一个输入型的按钮或类型的提交或按钮标签 – leopic

甜，我改为按钮式和它的伟大工程：d – svict4

我也有这个问题，但只是解决了它。

通过使用input type =“image”并将1x1px空白（透明）.png或.gif添加到表单元素的src中。然后使用CSS将背景设置为双倍（或者，在上述情况下为三倍）翻转图像。表单元素使用空白.png作为图像，但在其下面是CSS处理的背景图像，显示了在其高度和宽度上提交按钮功能的精美工作过渡。

=）

代码是直接取自我的情况：

HTML：

<div class="formrow"> 
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" /> 
</div>

CSS：

#send 
{ 
    height: 25px; 
    width: 107px; 
    overflow: hidden; 
    display: block; 
    float: right ; 
    background: url('../images/style/button-send.png'); 
} 


#send:hover 
{ 
    background-position: 0 -25px; 
}

我希望这有助于。 =）

顺便说一句，对我来说，这种方法也照顾到了svict4提到的问题。 =）

来源

2015-10-08 08:27:45 EsQuizzy

使用CSS的输入按钮，单张图片翻转

回答

相关问题