Grow your CSS skills. Land your dream job.

Free CSS style Input Submit and Button

  • # July 8, 2013 at 10:02 am

    Here is some thing I have been working on for my store if any one wants to copy design feel free to do so or with code pen can fork it.

    http://codepen.io/mwbcomputers/pen/bfjgt

    # July 26, 2013 at 11:40 am

    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.

    # July 26, 2013 at 10:56 pm

    You need to apply a border, or you can just set border: none

    Con
    # July 29, 2013 at 3:33 am

    @mwbcomputers

    I noticed a lot of duplication and some errors in your code.

    I quickly made it a bit neater, thought you’d be interested in how I did it.

    http://codepen.io/conhuynh/pen/oEyAc

    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.

    # July 29, 2013 at 9:07 am

    @death180 OMG, so obvious. It was Friday and I was fried. =)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".