Theo's Typesafe Cult•15mo ago

Button with 4 triangles at 4 corners

What is the best way for me to create a button like this (shown in image)? In the worst case, I can think of having 4 divs inside the button with position:absolute for the triangles, but that is kinda a PITA, so I was wondering if there is a better approach

Solution:

I would have done the 4 div solution for simplicity If u want another possible solution try using border by using an image as a reference there is a css proprety for taking an image as a border...

Jump to solution

2 Replies

Solution

H•15mo ago

I would have done the 4 div solution for simplicity If u want another possible solution try using border by using an image as a reference there is a css proprety for taking an image as a border

cornflourOP•15mo ago

I ended up with the 4 div solution for anyone else checking this and wanting some references, here is my code

const CtaButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, children, ...rest }, ref) => {
        return (
            <button
                ref={ref}
                className={cn(
                    "group relative bg-cta px-6 py-1 text-foreground hover:bg-primary",
                    className,
                )}
                {...rest}
            >
                {children}

                {/** The 4 triangles at 4 corners */}
                <div className="absolute -right-1 -top-2 h-0 w-0 rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -right-1 h-0 w-0 rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -left-1 -top-2 h-0 w-0 -rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -left-1 h-0 w-0 -rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
            </button>
        )
    },
)
CtaButton.displayName = "CtaButton"

const CtaButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, children, ...rest }, ref) => {
        return (
            <button
                ref={ref}
                className={cn(
                    "group relative bg-cta px-6 py-1 text-foreground hover:bg-primary",
                    className,
                )}
                {...rest}
            >
                {children}

                {/** The 4 triangles at 4 corners */}
                <div className="absolute -right-1 -top-2 h-0 w-0 rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -right-1 h-0 w-0 rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -left-1 -top-2 h-0 w-0 -rotate-[40deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
                <div className="absolute -bottom-2 -left-1 h-0 w-0 -rotate-[140deg] border-b-[13px] border-l-[3px] border-r-[3px] border-t-0 border-transparent border-b-cta group-hover:border-b-primary" />
            </button>
        )
    },
)
CtaButton.displayName = "CtaButton"

one thing to note here is that the button color cannot have opacity with it, since the triangles have a few overlap with the main button

Gaming

Programming

Button with 4 triangles at 4 corners