Can you style html form buttons with css?

Question

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

<input type="submit">

type buttons. Can I style these somehow in css? If not, the other way of doing it i guess would be to use a div instead, and make it a link. How do you make those work with forms?

score 48 · Accepted Answer · edited Jan 26 '14 at 10:41

48

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

edited Jan 26 '14 at 10:41

Dirk

10,668
2
35
49

answered Feb 19 '13 at 05:15

Shailender Arora

7,674
2
31
35

can I do the same with text inputs and textareas? – Alex Mohr Feb 19 '13 at 12:24
@Xzar why not sure you can edit can customize the design of text inputs and textarea easily by CSS..... – Shailender Arora Feb 20 '13 at 08:24

score 19 · Answer 2 · answered Feb 19 '13 at 05:12

19

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.

answered Feb 19 '13 at 05:12

ncksllvn

5,699
2
21
28

Some styling (IE: Text-Shadow) won't be applied via class, and only work if you target the input type directly. – Mark Dec 04 '14 at 14:02
1

Not working for me in IE11. It'll take everything but the text-shadow, but targeting directly on the input type applies it correctly. – Mark Dec 11 '14 at 13:21

score 3 · Answer 3 · answered Feb 19 '13 at 05:12

3

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

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

answered Feb 19 '13 at 05:12

Dave Anderson

11,836
3
58
79

@candiancreed The `input` elements would need to be children of the element with the class. I have this selector working in plenty of projects. Can you create an example and post a question? – Dave Anderson Sep 29 '15 at 21:20

score 3 · Answer 4 · answered Feb 19 '13 at 05:18

3

You can directly create your own style in this way:

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

answered Feb 19 '13 at 05:18

Ricky Youssef

228
4
10

I think this won't work -- OP used type=submit, not type=button. – Ben Wheeler Jan 10 '14 at 20:55

score 1 · Answer 5 · answered Dec 21 '14 at 14:11

1

You might want to add:

-webkit-appearance: none;

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

answered Dec 21 '14 at 14:11

achoukah

1,345
2
10
10

Raj Adroit · Answer 6 · 2013-02-19T05:48:55.763

0

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

edited Feb 19 '13 at 05:48

answered Feb 19 '13 at 05:11

Raj Adroit

3,828
5
31
44

Can you style html form buttons with css?

6 Answers6

Linked

Related