I found your post by accident. Not surfing the forums, but Googling. =)
I’m working on stylizing some form buttons similarly to yours, but for some reason, they still have the borders of a regular form button. I looked at yours, and I can’t see where I might be doing anything all that different. The only thing my input tags don’t have is an id attribute. Though I did notice that each of yours has a two class attributes. One for the style and one for “button”. Is that on purpose? I didn’t notice a “button” class style in your CSS.
Here’s my codepenhttp://codepen.io/downcasteyes/pen/nKetF. If you notice anything out of place, feel free to point it out. Just click one of the two buttons to access the forms, to see the form buttons I’m referring to not stylizing properly.
Just a few notes:
- You actually put class=”" twice in your inputs, this isn’t valid HTML.
- In some instances you had something similar to rgba(0,0,0,0) – this is equivalent to transparent. And because you used it on box-shadow, it meant that the box-shadow was invisible.
- You also used linear-gradient, but it went from one colour, to the same colour. It makes more sense to just use a flat colour instead of the linear-gradient.