如何樣式提交按鈕？

如何樣式提交表單按鈕？這是可能的，或者我應該使用圖片（PNG）？我的意思是這樣的：如何樣式提交按鈕？

enter image description here

來源

2013-06-21 user2426362

沒錯完全有可能用CSS3，'邊境radius'和'gradients' –

那麼，你應該先了解CSS或層疊樣式表。他們習慣於設計我們的網頁。使用CSS你可以設計你的按鈕風格。

就比如：

CSS是什麼？

CSS表示層疊樣式表
樣式定義如何顯示HTML元素
樣式添加到HTML 4.0解決問題
外部樣式表可以節省大量的工作
外部樣式表存儲在CSS文件中

您可以像這樣設計按鈕樣式：

input[type=submit] { 
    border-radius: 5px; 
    border: 0; 
    width: 80px; 
    height:25px; 
    font-family: Tahoma; 
    background: #f4f4f4; 
    /* Old browsers */ 
    background: -moz-linear-gradient(top, #f4f4f4 1%, #ededed 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f4f4f4), color-stop(100%, #ededed)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f4f4f4 1%, #ededed 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f4f4f4 1%, #ededed 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f4f4f4 1%, #ededed 100%); 
    /* IE10+ */ 
    background: linear-gradient(to bottom, #f4f4f4 1%, #ededed 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#ededed', GradientType=0); 
    /* IE6-9 */ 
}

http://jsfiddle.net/mareebsiddiqui/jGVa3/1

來源

2013-06-21 13:17:08

查找一些所謂的CSS。您可以定義一個類來定義字體，大小，邊框，半徑等任何元素

來源

2013-06-21 13:08:03

input[type="submit"]{your style here}

來源

2013-06-21 13:08:07

瀏覽器配備了大集的默認樣式，以使事情看起來很漂亮，如果風格不被網站設置。例如Firefox已經默認提交按鈕定義以下樣式：

input[type="submit"] { 
    -moz-appearance: button; 
    -moz-binding: none; 
    -moz-box-sizing: border-box; 
    -moz-user-select: none; 
    background-color: buttonface; 
    border: 2px outset buttonface; 
    color: buttontext; 
    cursor: default; 
    font: -moz-button; 
    line-height: normal; 
    padding: 0 6px; 
    text-align: center; 
    text-shadow: none; 
    white-space: pre; 
}

來源

2013-06-21 13:09:09 underscore

你可以做到這一點的方式如下： -

input[type="submit"] { 

/* 

style code here 

*/ 
}

來源

2013-06-21 13:10:21

try this 
    .button { 
     -moz-border-radius: 25px; 
     -moz-box-shadow: #6E7849 0px 0px 10px; 
     -moz-transition: all 0.5s ease; 
     -ms-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     -webkit-border-radius: 25px; 
     -webkit-box-shadow: #6E7849 0 0 10px; 
     -webkit-transition: all 0.5s ease; 
     background-color: #6E7849; 
     background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849); 
     background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849); 
     background-image: -o-linear-gradient(90deg, #B9C788, #6E7849); 
     background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849); 
     background-image: linear-gradient(90deg, #B9C788, #6E7849); 
     border-radius: 25px; 
     border: 2px solid #4a5032; 
     box-shadow: #6E7849 0px 0px 10px; 
     color: #ffffff; 
     display: inline-block; 
     font-size: 4em; 
     margin: auto; 
     padding: 15px; 
     text-decoration: none; 
     text-shadow: #000000 5px 5px 15px; 
     transition: all 0.5s ease; 
    } 

    .button:hover { 
     padding: 15px; 
    } 

OR 
try your choice color combination button 
http://www.cssdrive.com/css3button/

來源

2013-06-21 13:11:25 falguni

我想現在邊界半徑是現在的標準沒有必要的-webkit-或-O-或-moz- :) –

如你願意，你可以風格的按鈕。與以前的答案一樣，您可以使用輸入[type =「submit」]來撬動選擇它的按鈕。

我建議你看看下面的鏈接：http://css3button.net/在這裏你將能夠自動生成使用許多CSS3屬性的按鈕。根據您的交叉瀏覽需求，您還可以看看http://caniuse.com/來決定是否有意義使用這些屬性。否則，你仍然可以使用BG圖片:-)

問候

來源

2013-06-21 13:21:26

您可以使用CSS ... 在HTML頁面做它，你應該加入

<input type="submit" value="Send"/>

然後，你需要添加此文本在另一個css文件中的同一個HTML文件中。

<style> 
input[type="submit"]{ 
    /* change these properties to whatever you want */ 
    background-color: #555; 
    color: #fff; 
    border-radius: 10px; 
} 
</style>

希望這將有助於你

來源

2013-06-21 13:22:54 MujtabaFR

如何樣式提交按鈕？

回答

相關問題