css Question posted in
Some basic documentation can be found here.

How can I create a button with custom shapes using only CSS (without clip-path)?

enter image description here

this is my button design and i want to create using only css.

"I tried using clip-path, and it works, but I want to create it using only CSS. Any suggestions would be appreciated…"

clip-path that i use:clip-path: polygon(0% 32.4%, 88% 1%, 88% 98%, 1% 78.43%);

Tags:

2

Answers


  1. 0

    use border-radius to create circular or oval shapes by rounding the corners of the button. after that Pseudo-elements (::before,::after), adding extra shapes to the button by creating additional layers that can be styled separately from the main element. Then Use borders to create triangles or other custom shapes by setting specific borders to transparent and one side to a solid color. You can combine these to create shapes without clip-path.

    Login or Signup to reply.
  2. 0

    You can try perspective property and rotateY()

    Something like that.

    <div> <button> Miss Smith Ellen</button> </div>


div {
  perspective: 40px;
  }

button {
  width: 150px;
  height: 45px;
  background-color: #f9d83c;
  border: none;
  transform: rotatey(-5deg);
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search