用css调整提交按钮的背景颜色渐变

嗨，我想要一个输入提交按钮，它具有在附加图像中给出的背景。提供了背景图像，但我不知道如何在提交按钮，所以而不是使用该图像我试图使用css 3颜色渐变属性来设置按钮样式，但是，我无法获得所需的颜色输出。欢迎任何帮助。 enter image description here 用css调整提交按钮的背景颜色渐变

到目前为止的CSS代码。

.button { 
    -moz-border-radius: 18px; 
    -moz-box-shadow: #fffff 0px 0px 11px; 
    -webkit-border-radius: 18px; 
    -webkit-box-shadow: #6E7849 0 0 10px; 
    background-color: #fefefefe; 
    background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe); 
    background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe); 
    background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe); 
    background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe); 
    background-image: linear-gradient(24deg, #d8d8d8, #fefefefe); 
    border-radius: 18px; 
    border: 1px solid #888888; 
    box-shadow: #fffff 0px 0px 11px; 
    color: #000000; 
    display: inline-block; 
    font-size: 3em; 
    margin: auto; 
    padding: 4px; 
    text-decoration: none; 
}

来源

2012-12-07 user1697113

使用该图像。完全匹配的梯度图像是不必要的痛苦：

.button { 
    display:block; 
    width:50px; //use actual image width 
    height:50px; // use actual image height 
    background:url(../img/button.png); //image file path 
} 

.button:hover { 
background:url(../img/button_hover.png); 
}

来源

2012-12-07 08:19:38 Matanya

问题是，它不是一个静态的宽度button.It有圆角，并会根据文本内的宽度跨越。 – user1697113

您可以使用滑动门技术：http：//css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/ – Matanya

您也可以在后台声明中添加'repeat-x' ，如果你知道高度不会改变。你可以使用'border-radius'作为圆角。 – Shauna

要使用图像作为输入很简单：

<input type="image"src="/images/submit.gif" />

来源

2012-12-07 08:20:57 DavidB

不确定这是最好的解决方案。他将在设置悬停状态时遇到问题，而不会与JS – Matanya

混淆SRC属性，但我认为每个人都假设存在悬停状态。 OP没有声明，代码似乎表明没有。如果没有悬停状态，这肯定是最简单的解决方案？ – DavidB

在现代浏览悬停状态是每个按钮的隐含要求。另一个好处是，他可以给按钮一个值，它会出现在BG图像的顶部，这在解决方案中是不可能的，这意味着他必须使用带有文本的按钮作为图像，这不是很好灵活和动态。而且，从语义上讲，最好在样式表中保留样式问题，并尽可能使HTML成为语义。 'type = submit'显然比'type = image'更多的语义。 – Matanya

最后我发现用推拉门技术，使该按钮的方式但仍处于危险之中，无法将其置于残疾状态。此链接帮助我很多http://www.springload.co.nz/love-the-web/dynamic-submit-buttons

CSS

div.submit_button { 
    background: transparent url('common/images/bg-submit2.png') no-repeat 0 0; 
    display: block; 
    float: left; 
    height: 27px; /* total height of the button */ 
    padding-left: 15px; /* end width */ 
} 

span.submit_button_end { 
    background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */ 
    display: block; 
    float: left; 
    font-weight: normal; 
    height: 27px; /* total height of the button */ 
} 

input.submit_input { 
    font-size: 13px; 
    font-weight:bold; 
    background: none; 
    border: none; 
    padding: 0 0 2px 15px; /* end width */ 
    color: #1b1d60; 
    cursor: pointer; 
    position: relative; 
    height: 25px; 
    line-height: 25px; 
    left: -15px; 
    margin-right: -15px; 
    padding-right: 15px; 
} 

input.submit_input:hover {color: #fff;} 

div.submit_button:hover {background-position: 0 100%;} 

div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}

HTML

<div class='submit_button'> 
    <span class='submit_button_end'> 
    <input class='submit_input' type='submit' value='Submit button' tabindex='#' /> 
    </span> 
</div>

来源

2012-12-07 09:33:56 user1697113

用css调整提交按钮的背景颜色渐变

回答

相关问题