Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to create a button pointing downward (image included) with only CSS?

Tags:

css

I would like to create this using only CSS. Is this possible? If so, can you guys help me out?

enter image description here

like image 291
J82 Avatar asked Apr 25 '13 10:04

J82


People also ask

How do I create a button down in CSS?

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.

Can you create buttons in CSS?

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.

Can I use button without form?

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.


1 Answers

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

like image 118
Turnip Avatar answered Oct 25 '22 12:10

Turnip