-1

Below, I would like to create the following effect on a button element in CSS:

enter image description here

Whereas I just want a basic regular button but with the 'tab' sticking out of the bottom.

How do I do this?

I've tried ::after and ::before, but neither even show any results for some reason (and I don't really know how to use those rules either).

.button { background: #aaa; font-size: 16px; color: #000; padding: 8px; width: 200px; border: 3px solid #000; border-radius: 6px; } .button::after { width: 10px; height: 100px; background: #aaa; }
<button class="button">BUTTON</button>

Improve this question
2
  • 1
    You need to add content: '' to your pseudo-element, otherwise it wont appear. Commented Jul 8 at 14:04
  • @RickardElimää Ah I see! It works now, so thanks :) Commented Jul 8 at 14:06

1 Answer 1

Reset to default
1

You're on the right track with ::after

  1. You need to include content in ::after, even if empty.

  2. You have to set position: relative on the button and position: absolute on the pseudo-element so it can be placed outside the button.

  3. You also didn’t tell the browser where to actually put the ::after element (like bottom, left, etc.).

example

.button { position: relative; background: #aaa; font-size: 16px; color: #000; padding: 8px; width: 200px; border: 3px solid #000; border-radius: 6px; text-align: center; } .button::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 7px; background: #aaa; border-left: 3px solid #000; border-right: 3px solid #000; border-bottom: 3px solid #000; border-radius: 0 0 6px 6px; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.