CSS button idea

Question

I need to create this button with CSS. I had no idea how I'm gonna do it so I'm trying to reach for help any idea?

This link will be helpful https://stackoverflow.com/questions/46523182/css-trapezoid-button-with-solid-border — Masoumeh Naderi, Mar 29 '22 at 07:14

score 1 · Answer 1 · answered Mar 29 '22 at 10:44

I've used skewed pseudo-element. CSS:

.my_button {
    background-color: transparent;
    background-image: linear-gradient(60deg, transparent 3.5rem, #F97300 3.5rem);
    border: none;
    border-radius: 0 8px 8px 12px;
    padding: .75em 1.25em .75em 2rem;
    position: relative;
    overflow: hidden;
}
.my_button::before {
    content: '';
    background-color: #F97300;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px 0 12px 8px;
    transform: skewX(30deg);
    transform-origin: 0% 0%;
}

See this pen.

CSS button idea

1 Answers1