'How do i make warping button using tailwind css v3 or vanilla css?

i want to ask how to make this button like this using tailwind css.

button

i tried making this button like this


  <button
    className="bg-tory-blue-500 py-[18px] px-7 rounded-[20px]"
    style={{ boxShadow: "0px 2px 4px 0px #BFEAFF" }}
  >
    Start
  </button>

can someone help me?

cssreactjstailwind-css


Solution 1:[1]

<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4">
  <div class="absolute h-10 w-28 -skew-y-6  rounded-tr-[20px] rounded-l-[20px] rounded-br-none bg-blue-600"></div>
  <div class="absolute top-2 mt-5 h-10 w-28 skew-y-6 rounded-l-[20px] rounded-br-[20px] rounded-tr-none bg-blue-600"></div>
  <button class="absolute left-9 top-7 bg-transparent text-xl font-bold text-white">Start</button>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 odie jordie

Related Questions