How to style submit button? [duplicate]

Question

How to style submit form button? This is possible or I should use the picture(png)? I mean something like this:

Answer 1

Well, You should first know about CSS or Cascading Style Sheets. They are used to style our webpages. Using CSS you can style your button.

Just For Instance:

What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

You can style the button like this:

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

you can do it using css... In the HTML page you should added

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

then , you need to add this text to in the same HTML file on in another css file..

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

Hope that will help you

Answer 3

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

Answer 4

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 5

Browsers come with a big set of default styles to make things look pretty if the styles are not set by the website. For example Firefox has the following styles defined for the default submit button:

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 6

You can do it in the following way:-

input[type="submit"] {

/*

style code here 

*/
}

Answer 7

you can style the Button as you wish. In the same way as in the previous answers, you can pimp your button selecting it using the input[type="submit"].

I would suggest that you take a look to the following link: http://css3button.net/ here you will be able to generate automatically the button using many CSS3 properties. According to your cross browsing needs, you can also take a look to http://caniuse.com/ to decide if it makes sense to use these properties. Otherwise you can still use a bg picture :-)

Regards