Как стиль кнопки отправки?

Question

Как стиль отправить кнопку формы? Это возможно или я должен использовать картинку (png)? Я имею в виду что-то вроде этого:

Answer 1

Ну, вы должны сначала знать о 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

Answer 2

Уточняющего что-то под названием CSS. Вы можете определить класс, чтобы определить шрифт, размер, границы, радиус и т.д. для любого элемента

Answer 3

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

Answer 4

Браузеры поставляются с большим набором стилей по умолчанию, чтобы сделать вещи выглядят довольно, если стили не установлены на сайте. Например 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; 
} 

Answer 5

Вы можете сделать это следующим образом: -

input[type="submit"] { 

/* 

style code here 

*/ 
} 

Answer 6

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/ 

Answer 7

вы можете стиль кнопки, как вы хотите. Точно так же, как и в предыдущих ответах, вы можете сунуть свою кнопку, выбрав ее, используя вход [type = "submit"].

Я предлагаю вам ознакомиться по следующей ссылке: http://css3button.net/ здесь вы сможете автоматически генерировать кнопку с использованием многих свойств CSS3. Согласно вашим требованиям к перекрестному просмотру, вы также можете взглянуть на http://caniuse.com/, чтобы решить, имеет ли смысл использовать эти свойства. В противном случае вы можете использовать Б.Г. картинку :-)

С уважением

Answer 8

вы можете сделать это с помощью CSS ... На странице HTML вы должны добавлены

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

то, что вам нужно добавить этот текст в том же HTML-файле в другом файле css.

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

Надежда, которая поможет вам