Trapezoid Button CSS Position

[bmoneruiux]

Over the past couple of days I’ve been back and forth with other designers in my office and on Stackoverflow. The topic was creating a trapezoid button.

So far we’ve collaboratively come to 4 different ways to do it. However out of the 4, the one that has the most consistent result is the actual button html element. When applying as a btn class to an anchor or a DIV, we get very wild results when implementing clears and/or br spacers.

How can we unify this when used with both a class or the html button element?

http://codepen.io/bmoneruiux/pen/yybKVR/

[Paulie_D]

Firstly links and divs are not buttons…

http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

Secondly, br tags should not be used for “spacers”, they are for forcing line breaks in text.

I see no reason why any styling should be affected by clearing floats though.

Other than that, pick one you like, and use it consistently across the site because it seems to me that any answers would be entirely subjective.

[bmoneruiux]

Yeah I know links and DIVs aren’t buttons. But they still are used as such every now and then, and sometimes I don’t have the power to change that depending on where I am in a project.

And I do not “traditionally” use br tags for spacers. This was obviously a quick code sketch and not an actual site.

But, yes, noted.

[Author]

Posts