Can you style html form buttons with css?

Question

I don\'t like the default button style. It\'s really boring. I am using

type buttons. Can I style these some

Answer 1

write the below style into same html file head section or write into a .css file

<style type="text/css">
.submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
    }
</style>

<input type="submit" class="submit"/>

.submit - in css . means class , so i created submit class with set of attributes
and applied that class to the submit tag, using class attribute

Answer 2

You can directly create your own style in this way:

 input[type=button]
 { 
//Change the style as you like
 }

Answer 3

Yeah, it's pretty simple:

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

I recommend giving it an ID or a class so that you can target it more easily.

Answer 4

You might want to add:

-webkit-appearance: none; 

if you need it looking consistent on Mobile Safari...

Answer 5

Yes you can target those specificaly using input[type=submit] e.g.

.myFormClass input[type=submit] {
  margin: 10px;
  color: white;
  background-color: blue;
}

Answer 6

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