I would like to create this using only CSS. Is this possible? If so, can you guys help me out?
Solution: Add css style using adding the margin-top property referencing the button. The following code snippet can be a positive or negative number to shift the button up or down.
To create text buttons first, we create simple buttons in HTML using a button tag. After creating the button we apply CSS and change its properties to make it look like a text button. To make it look like a text button we remove its default border and background.
A button element is valid anywhere in the document body where text-level markup may appear. Such an element need not have any relationship to a form element.
Fairly easy with borders and a pseudo element:
<a href="#" id="button">ALL</a>
#button::after {
content: "";
border: 64px solid transparent;
border-top: 12px solid orange;
position: absolute;
top: 29px;
left: 0;
}
DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With