[英]adjusting background color gradient of a submit button with css
嗨,我想設置一個輸入提交按鈕的樣式,如背景圖片所示。提供了背景圖像,但是我不確定如何在提交按鈕中實現它,所以我嘗試使用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;
}
使用圖像。 將漸變完全匹配到圖像是不必要的痛苦:
.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);
}
要將圖像用作輸入非常簡單:
<input type="image"src="/images/submit.gif" />
最終我找到了使用滑動門技術制作此按鈕的方法,但是仍然處於危險狀態以將其設置為禁用狀態。 這個鏈接幫助我很多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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.