CODEWITHSUNDEEP
cssbuttoncss-selectorsuibutton
Husnain Khalil
Husnain Khalil

Reputation: 21

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

Upvotes: 0

Views: 69

Answers (3)

Brett Donald
Brett Donald

Reputation: 14340

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>

Upvotes: 0

user29057012
user29057012

Reputation: 21

Try to use border-top-right-radius of left, and border-top-left-radius of right.

Upvotes: 2

gwcoffey
gwcoffey

Reputation: 5919

One way to achieve this is with a background image on the button. Essentially your button has a background image with a large orange rounded rectangle that is positioned outside the bounds of the button itself so that only one corner shows.

Here's an example using an SVG image sized to the same aspect ratio as the button, but with the contained rounded rectangle spilling outside the bounds of the image.

body {
  background: black;
}

button.branded {
  /* size and lay out the button */
  display: flex;
  padding: 0 4rem 0 1rem;
  height: 4rem;
  width: 13rem;
  align-items: center;
  justify-content: left;
  
  /* make it transparent */
  background: transparent;
  
  /* style the text (adjust as needed) */
  font-weight: bold;
  
  /* apply a rounded border around the whole thing */
  border: 1px solid #f3b67e;
  border-radius: 2rem;
  
  /* apply an orange rounded rectangle as the
     background image, offset to get the effect
     you want */
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20154%2048%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M125.289%2029.369v14.254c0%2019.016-13.061%2034.455-29.149%2034.455H23.776c-16.088%200-29.149-15.439-29.149-34.455V29.369c0-19.016%2013.061-34.455%2029.149-34.455H96.14c16.088%200%2029.149%2015.439%2029.149%2034.455Z%22%20style%3D%22fill%3A%23f3b67e%22%20transform%3D%22matrix(1.17512%200%200%20.99415%20-29.431%204.576)%22/%3E%3Cpath%20d%3D%22M134.842%2025.101v-.618h6.998l-2.511-2.344.468-.437%203.31%203.09-3.31%203.089-.468-.437%202.511-2.343h-6.998Z%22%20style%3D%22fill%3A%23f3b67e%22%20transform%3D%22matrix(.82472%20-.93061%20.99678%20.88336%20-2.918%20131.118)%22/%3E%3C/svg%3E');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}
<button class="branded">Available for Projects</button>

Upvotes: 0

Related Questions