Button Shapes

Button Shapes CSS

There are many different button shapes you can create in CSS, depending on your design preferences. Here are some cool button shapes you can create using CSS:

1. Rounded Rectangle: You can create a rounded rectangle button by setting the border-radius property to a specific value. For example,

border-radius: 20px;

will create a button with rounded corners.

2. Circle: You can create a circular button by setting the border-radius property to 50%. For example,

border-radius: 50%;

will create a button that is a perfect circle.

3. Pill: A pill button is similar to a rounded rectangle, but with a larger radius on the ends. To create a pill button, you can set the border-radius property to a higher value for the top and bottom than for the left and right. For example,

border-radius: 30px 15px 30px 15px;

will create a pill shape.

4. Triangle: You can create a triangle button using CSS borders. To do this, you can create a border with a transparent color on two sides, and a solid color on the other two sides. For example,

border: 50px solid transparent; border-top-color: red; border-right-color: blue;

will create a triangle button.

5. Diamond: You can create a diamond-shaped button by setting the width and height of the button to the same value and then rotating it by 45 degrees using the transform property. For example,

 transform: rotate(45deg);

will rotate the button to a diamond shape.

These are just a few examples of the many button shapes you can create using CSS. You can also experiment with other shapes by using the CSS clip-path property or SVG graphics.

Bonus

To create a button that is pointed at each end but still has a rectangular shape in the middle using CSS, you can use the ::before and ::after pseudo-elements along with absolute positioning.

button {
  position: relative;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: #fff;
}

button::before,
button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

button::before {
  top: 0;
  left: 0;
  border-width: 0 20px 20px 0;
  border-color: transparent #007bff transparent transparent;
}

button::after {
  bottom: 0;
  right: 0;
  border-width: 20px 0 0 20px;
  border-color: #007bff transparent transparent transparent;
}

In this code, we’re using the ::before and ::after pseudo-elements to create the two triangular shapes that point towards the center of the button. The border-width and border-color properties are used to set the size and color of the borders for each pseudo-element. The position property is set to absolute to position the pseudo-elements relative to the button element, and the content property is set to an empty string to ensure that the pseudo-elements are displayed.

The result will be a button that has pointed ends but still maintains a rectangular shape in the middle, as shown below: