Splitting two linked buttons using CSS background color

Question

I am trying to create two linked buttons split by CSS background-color.

.right-part {
  display: inline-block;
  width: 100px;
  height: 52px;
  background: linear-gradient(110deg, #fff 0%, #fff 50%, #FF7240 50%, #FF7240 100%);
  background-color: #FF7240;
  border-radius: 0px 26px 26px 0px;
}

.left-part {
  display: inline-block;
  width: 100px;
  height: 52px;
  border-radius: 26px;
}

<div class="left-part">left</div>
<div class="right-part">right</div>

The background color does not fill the div element.

TylerH · Accepted Answer · 2021-08-17 13:46:52Z

2

The background color does not fill the div element.

It fills the div element; it fills the right element because that's the element you apply the background to.

I am not really sure if you want to have two different elements (divs/buttons) with 2 separate background-colors or you want the background-color added to a wrapper (parent) over the 2 elements.

See the below solution for the second option.

Gradient made with the help of cssgradient

.wrapper {
  display: flex;
  width: 200px;
  height: 42px;
  border-radius: 25px;
  background-color: rgb(255, 240, 64);
  background: linear-gradient(100deg, rgba(255, 240, 64, 1) 0%, rgba(255, 240, 64, 1) 50%, rgba(255, 114, 64, 1) 50%, rgba(255, 114, 64, 1) 100%);
  align-items: center;

}

.wrapper div {
  flex: 0 0 50%;
  text-align: center;
}

<div class="wrapper">
   <div class="left-part">right</div>
   <div class="right-part">left</div>
</div>

edited Aug 17, 2021 at 13:46

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Aug 17, 2021 at 9:36

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hao Wu · Accepted Answer · 2021-08-17 09:35:43Z

2

You need to give them a parent div and set the background-image to the parent:

.button {
  display: inline-block;
  background-image: linear-gradient(100deg, #f4bc58 0%, #ed8b48 50%, #FF7240 50%, #FF7240 100%);
  border-radius: 26px;
}

.button > * {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 52px;
}

<div class="button">
  <div class="left-part">left</div>
  <div class="right-part">right</div>
</div>

answered Aug 17, 2021 at 9:35

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Comments

Temani Afif · Accepted Answer · 2021-08-17 09:38:09Z

2

Create a small overlap using negative margin then simply use clip-path to create the slanted effect:

.right-part {
  border-radius: 0px 50px 50px 0px;
  background:orange;
  margin-left:-18px;
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%);
}

.left-part {
  border-radius: 50px 0 0 50px;
  background:red;
}

[class] {
  display: inline-block;
  width: 100px;
  height: 52px;
  text-align:center;
}

/* to illustrate the accuracy of each area */
[class]:hover {
  filter:brightness(.8);
}

<div class="left-part">left</div>
<div class="right-part">right</div>

answered Aug 17, 2021 at 9:38

Temani Afif

280k30 gold badges380 silver badges506 bronze badges

Comments

user16639239 · Accepted Answer · 2021-08-17 09:38:21Z

0

I think this is what you really want

  button {
  height: 50px;
  width: 200px;
  border-radius: 40px;
  border: none;
  background: linear-gradient(-60deg, #FFA63B 50%, #FA713F 50%);
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <button> </button>
</body>
</html>

Let me know if this work for you

answered Aug 17, 2021 at 9:38

user16639239

Collectives™ on Stack Overflow

Splitting two linked buttons using CSS background color

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related