1

嗨，我想设置一个输入提交按钮的样式，该按钮具有附加图像中给出的背景。提供了背景图像，但我不确定如何在提交按钮中实现它，所以我尝试使用 css 而不是使用该图像3 种颜色渐变属性来设置按钮样式，但是，我无法获得所需的颜色输出。欢迎提供任何帮助。 在此处输入图像描述

到目前为止的 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;
}
4

3 回答 3

1

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

.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-07T08:19:38.550 回答
0

使用图像作为输入非常简单：

<input type="image"src="/images/submit.gif" />
于 2012-12-07T08:20:57.723 回答
0

最后，我找到了使用滑动门技术制作此按钮的方法。但是，在禁用状态下设置它的样式仍然存在危险。这个链接帮助了我很多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-07T09:33:56.807 回答