CSS3 Buttons

[joshuanhibbert]

I’ll give it a shot if I can find the time Karl.

[joshuanhibbert]

@Hompimpa I made this a while ago (view in Chrome): http://jsfiddle.net/joshnh/a8NLe/show/

[TheDoc]

I just want to say you guys are awesome for making this thread happen.

[chrisburton]

@Hompimpa I think you have a future in UI Design

[codex73]

@Hompimpa Awesome! Chocolate UI nice nice. How could this work also in IE?

[cwebbdesign]

Love this thread. I know I’m arriving late! Here’s my modest contribution – view in the light background http://jsfiddle.net/cwebbdesign/ZcuXJ/8/
That lego is a great use of :before and the sexy button has such a nice hover!

[Anonymous]

http://jsfiddle.net/ZcuXJ/9/

Added one of my own buttons to the mix. Hope you like! :)

[Paulie_D]

Click events are handled by js so that’s another subject.

As for the color, no just changing the bg colorwont do anything because the gradient is overriding the bg color.

Oh…and way to revive a thread that’s been dormant for 2 years. Still perhaps someone as some new ideas.

[dyr]

Start with outline: 0; and add styles as you please.

input { 
  border: 1px solid #999;
  border-radius: 3px;
  font-size: 
  outline: 0;
  /* padding: 0.5em 0.7em;  */ <- EMs depends on font-size
  /* font-size: 1em */ <- maybe set this elsewhere
}

Make some :focus style.

input:focus {
  box-shadow: inset 0 0 3px blue;
}

Make validation classes to be used by your JavaScript or PHP or whatever.

input.valid {
  border-color: green;
}

input.invalid {
  border-color: red;
}

[dyr]

aishamcan stop the spam posts. I’m reporting all of your replies.

[GroovyMotion]

This thread is awesome! My favorite is Blue Minimal! Thanks @Odd_E

Now I just need to figure out how to make a transition with gradients.

[Author]

Posts