Kevin Powell - Community•17mo ago

Need help creating a complex button in css

Hello everyone, I've design for this button andI want to create it using css. I'm having difficulty finding approach to build it. Can someone please help me breaking down the logic please. I've this code to cut corners of the container.

.cut-top-lef-bottom-right-corner {
  position: relative;
  border: 2px solid white;
  clip-path: polygon(6% 0, 100% 0, 100% 79%, 95% 100%, 0 100%, 0 19%);
  border: none;
  width: 194px;
  height: 36px;
}

.cut-top-lef-bottom-right-corner {
  position: relative;
  border: 2px solid white;
  clip-path: polygon(6% 0, 100% 0, 100% 79%, 95% 100%, 0 100%, 0 19%);
  border: none;
  width: 194px;
  height: 36px;
}

Any help would be appreciated.

3 Replies

Jochem•17mo ago

I found this article which has a generator for the clip-path on a pseudo-element to add this. You can just tweak the values: https://css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties/ The generator: https://css-generators.com/custom-corners/

KushagraOP•17mo ago

thanks for sharing this @jochemm , this would help me a lot. I also found a solution to create the exact button, using absolute positioning I was able to create the exact button needed, putting it here, in case anyone in future needs some reference. Really appreciate your help and quick support. Thanks

<div className=" relative w-fit mt-6 cursor-pointer transition-all ease-in-out hver:scale-105 active:scale-95">
              <button className=" uppercase text-xl font-semibold bg-gradient-to-t from-[#590CA6] via-[#DB58DB] to-[#F28AF2] px-5 py-4 m-2">
                Start for free
              </button>
              {/* top */}
              <div className="   absolute w-[83.6%] right-0 border-t-2 h-full top-0 z-50"></div>
              {/* top left */}
              <div className="   absolute w-full border-r-2 h-[67.0%] rotate-45 -top-[82px] -left-[163px] z-50"></div>

              {/* right  */}
              <div className="   absolute w-full border-r-2 h-[54.5%] top-0 z-50"></div>
              {/* left */}
              <div className="   absolute w-full border-l-2 h-[52.5%] bottom-0 z-50"></div>

              {/* bottom */}
              <div className="   absolute w-[83.6%] left-0 border-b-2 h-full top-0 z-50"></div>
              {/* bottom right */}
              <div className="   absolute w-full border-r-2 h-[65.4%] rotate-45 -top-[42px] -right-[14.5px] z-50"></div>
            </div>

<div className=" relative w-fit mt-6 cursor-pointer transition-all ease-in-out hver:scale-105 active:scale-95">
              <button className=" uppercase text-xl font-semibold bg-gradient-to-t from-[#590CA6] via-[#DB58DB] to-[#F28AF2] px-5 py-4 m-2">
                Start for free
              </button>
              {/* top */}
              <div className="   absolute w-[83.6%] right-0 border-t-2 h-full top-0 z-50"></div>
              {/* top left */}
              <div className="   absolute w-full border-r-2 h-[67.0%] rotate-45 -top-[82px] -left-[163px] z-50"></div>

              {/* right  */}
              <div className="   absolute w-full border-r-2 h-[54.5%] top-0 z-50"></div>
              {/* left */}
              <div className="   absolute w-full border-l-2 h-[52.5%] bottom-0 z-50"></div>

              {/* bottom */}
              <div className="   absolute w-[83.6%] left-0 border-b-2 h-full top-0 z-50"></div>
              {/* bottom right */}
              <div className="   absolute w-full border-r-2 h-[65.4%] rotate-45 -top-[42px] -right-[14.5px] z-50"></div>
            </div>

capt_uhu•17mo ago

@Kushagra border-image with an SVG can get this done in just a few lines of CSS no extra div or pseudo elements: https://codepen.io/jsnkuhn/pen/vYQQVpy?editors=1100

Jason Kuhn

CodePen

vYQQVpy

...

Gaming

Programming

Need help creating a complex button in css