Splitting two linked buttons using CSS background color

user_6463558 0
Viewed 110

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

enter image description here

.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.

css html
4 Answers

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>

user_102892650

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>

user_64411240

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>

user_86203330

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

Admin1
Related