CODEWITHSUNDEEP
css
themightymanuel
themightymanuel

Reputation: 135

How can you change form button appearance?

I am wondering if it is possible to change the appearance of form buttons. Mostly the Height, Width etc. but also color if possible without having to create an image for it.

Upvotes: 1

Views: 6996

Answers (2)

Bill
Bill

Reputation: 19298

http://www.w3schools.com/css/css3_intro.asp

Click the link and learn the tutorial you will get everything you need.

You can change the shape of the button by change the background colour, board, corner radius.

<style>
button{
background: #444;
width: 100px;
height: 100px;
border: 1px solid #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<button>Test</button>

Upvotes: 2

acfrancis
acfrancis

Reputation: 3681

Sure, you can. Buttons can be styled like more other elements on the page via CSS. For example:

http://jsfiddle.net/hs95X/

<form>
    <input type="button" value="Button1" class="c1" />
       <input type="button" value="Button2" class="c2" />
       <input type="button" value="Button3" class="c3" />
</form>

.c1 {
    background-color: #cc0000;
}
.c2 {
    color: white;
    background-color: #cc0000;
}
.c3 {
    color: white;
    background-color: #cc0000;
    width: 10em;
    height: 5em;
}

You should see a Button1 with a red background, Button2 with white text on red and Button3 with a larger size. You can do much more than that but that's a start.

Upvotes: 3

Related Questions