Custom "Button" – need help with some details

[shaneisme]

First, here’s a demo: http://codepen.io/drainpip/pen/EGeyg

The problem I’m having is the font-size: 150% on the ::after element. Some fonts and resolutions, things just start breaking up. I’m trying to think of how else to more simply organize the CSS, or change my markup, but I seem to be stuck…

Does anyone have ideas on how to keep the right arrow and its border box paired perfectly with its parent?

P.S. – for full disclosure, this will be used on a corporate website so let me know if using your code for that purpose is OK should it be a better solution!

[Paulie_D]

Does anyone have ideas on how to keep the right arrow and its border box paired perfectly with its parent?

I’m inclined use a div to define the outlines etc and then let the anchor and pseudo-element be inside it.

If I’m right that should fix the border problem…but I’d have to have a play first.

[Paulie_D]

could you do away with the vertical border?

That works.

One thing (in all the pens) the class should be specified as affecting anchor a.button-arrow otherwise (at present) it’s not taking on the right font-color.

[shaneisme]

Thanks for the idea @wolfcry911 – I think with a little tuning I could still get the left-border back.

I’m going to mess with yours and see what I can do.

@Paulie_D – in the actual environment the color is going through properly due to other declarations, so I’m not too worried :)

[paulob]

Hi,

Perhaps this might render more consistently.

http://codepen.io/paulobrien/full/GohcK/

It seems ok at first glance.

[nixnerd]

@shaneisme… what are your support requirements? Is ie10+ cool? This type of element becomes DRASTICALLY easier and cleaner with flexbox.

These are for input… but you get the idea:

http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

[shaneisme]

@paulob – I like some of your ideas, I might just iron some of them in.

Joe – For this particular element, I have to do things without flexbox. Someday :)

[shaneisme]

After not quite getting the border to line up at all zooms before the @paulob version, I went with adding a bit more CSS following his lead.

http://codepen.io/drainpip/pen/EGeyg/

(I added in the functions I use at the top just to make it easy to go back and forth from CodePen so don’t mind me)

If anyone can make this better (smaller) I’d be all ears.

[Author]

Posts