Can You Style HTML Form Buttons with CSS

Can you style html form buttons with css?

You can achieve your desired through easily by CSS :-

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" />

CSS

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}

#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

DEMO

How to style form submit button in CSS?

If you want more control over the style of your submit button, use the button tag as so:

HTML

<form action="masterpage.cgi" method="post">
    <input type="hidden" name="test" value="hoi">
    <button type="submit" name="submit">opgave2</button>
</form> 

CSS - In this case I've styled it to appear like a link. (Not the best idea, just an example)

ul.topNav {
    margin:0;
    padding:0;
    width:960px
}   
.topNav li {
    float:left;
    display:inline-block
}   
button {
    background:none;
    border:none;
    color:#00C;
    font-size:24px
}   
button:hover {
    text-decoration:underline;
    cursor:pointer
}

How to style submit button?

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

Styling the Submit Button in a Form

You can do this:

.button input[type=submit]{ 
    background: #000;
    color: #fff;
}

DEMO HERE

How to style a clicked button in CSS

This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))

button{  background-color:yellow;}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {  color: orange;}
a.button{  color:green;  text-decoration: none;}
a:visited {  color: purple;}
a:active {  color: blue;}

<button>Hover and Click!</button><br><br>
<a href="#">Hello</a><br><br><a class="button" href="#">Bye</a>

How to format a button with in Form tag, html?

Form has no method="link" and you don't need a form to go to another page.

Use a:

<a href="page2.html">to Page 2</a>

or if you want a button:

<button onclick="javascript:window.location.href='page2.html';">to Page 2</button>

and give it an id like <button id="btn" ... then you can give it any style you want:

<style type="text/css">
    #btn {
        background-color: green;
        color: white;
        font-weight: bold;
        /* etc */
    }
</style>

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

applying different style to specific input button

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.

You can specificity the css selector using 'has' class add apply the rule to input button elements with class .button2:

input[type="button"] {  width: 500px;  background: red;}[type='button'].button2 {  width: 100px;  background: black;}

<input type="button">
<input type="button" class="button2">

HTML - Styling a Form Button

You can easily make your button through CSS3 Border-Radius property:-

CSS

 #visit_return_button{
    background-color:#9C8C42;
    border: 2px solid #91782c;
    color: #FFF;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    }

HTML

<button id="visit_return_button" type="submit">Increase</button>

demo:- http://jsfiddle.net/VY8xs/3/

---

Related Topics