css Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    try to use "border-top-right-radius" of left and "border-top-left-radius" of right

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search