HELP with a button
hello guys, i would like to know who i do a button like this in html css!
30 Replies
I have text and a background applied to the same place using grid, then I apply a skew to the background. This background could have a solid colour or a border. Apply a larger padding to the text to change the size of the button
I initially did thicker borders thinking that thin wouldn't look good but it looks fine
You can click buttons outside of what is visible, however buttons next to each other act predictably in the middle. You'd need a slightly more complicated method to get the button clickable area to line up
@z- ::theProblemSolver:: @Do Contra you can simply just do this https://codepen.io/deerCabin/pen/YzddJLe
Of course, also fixes buttons being clickable where it looks clickable
yeah, i believe it also simplifies your example a little too?
Yeah
They both feel like bodges but in different ways
yeah, if you take a look at mine, i recommend using a custom property for the skew value so it's easier to maintain.
Of course
hopefully they find use out of both
good methods and things to take note of in both
thanks soo muchh guys it was so helpful
my code doesnt work
the text
what does the html look like?
you've got to use another element inside of the button tag, in the css the
button > * is selecting everything within the button tag, that's what the wildcard selector does (*), you'll have to do this-
hmmm make sense sorry
im a rooky
xD
no worries, i was in your position once haha
@Do Contra does it work for you now?
yheyhe
👍
another option here is to use a skewed pseudo element as a background panel. That way you don't need the extra p tag or to un-skew the text.
i feel that'd be harder to keep a track of and maintain on a large scale
you'd have to create a utility class for buttons for something like that
i updated the codepen with an example of that if any of ya'll would like to look- https://codepen.io/deerCabin/pen/YzddJLe/
it's also worth pointing out here that these are not semantically buttons. These should be links that are styled to look like buttons.
i believe links that take you outside of the site, to another page, need to be anchor tags? if it's not that, it should be a button right?
btw, little tip,
now you are not skewing the button anymore, but the ::before psuedo element, you don't need the <p> tags anymore
also, instead of setting
top/left and width/height. you can just use inset: 0 for those 4 linesyep that's pretty much it. Here's the best explanation i could find on a quick google: https://css-tricks.com/a-complete-guide-to-links-and-buttons/ although i'd imagine Kevin probably has a video on this too
Awesome I’ll check it out, with my example they weren’t meant to be links, that’s why they’re buttons
Oh cool, I didn’t know that, and I forgot to remove the p tags haha
I just assumed that OP wanted buttons and so I gave them buttons. Could have been to open a modal