cssbuttoncss-selectorsuibutton

How can I design a button with two colors and a curved border in CSS?

I am trying to create the button similar to the button shown in image. Button has 2 colours inside it (like background color). 1 is transparent and other color is light-orange. The light-orange color has only top-right border radius. For easy understanding, I attached the image, I want the same exact this design. Your help will be greatly appreciated. Thanks

I have tried gradient technique but I don't know how to make the color's border-radius.

pale orange stylized button on a black background

Solution

  • The most important technique is to have the button contain two sub-elements, so you can style the two halves of the button individually.

    <button>
  <span>Available for Projects</span>
  <span>➚</span>
</button>

    For the border-radius, use a large fixed value like 99em, and on the first span set the radius on one corner only.

    border-top-right-radius: 99em;

    enter image description here

    A snippet to demonstrate:

    :root {
  --clr-one: black;
  --clr-two: orange;
  --clr-three: pink;
}

body {
  background: var(--clr-one);
  margin: 1em;
}

button {
  font-size: 16px;
  background: var(--clr-one);
  color: var(--clr-two);
  border: 2px solid var(--clr-two);
  border-radius: 99em;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: pointer;
}

button > :first-child {
  background: var(--clr-two);
  color: var(--clr-one);
  padding: 0.6em 1.5em 0.6em 1em;
  border-top-right-radius: 99em;
  box-shadow: -10px 0 5px var(--clr-two);
}

button > :last-child {
  font-size: 24px;
  padding: 0 0.6em 0 0.4em;
}

button:hover {
  color: var(--clr-three);
  border-color: var(--clr-three);
}

button:hover > :first-child {
  background: var(--clr-three);
  box-shadow: -10px 0 5px var(--clr-three);
}
    <button>
  <span>Available for Projects</span>
  <span>➚</span>
</button>