Menu
I want to use continuous gradient over different buttons having same parent. I have came across technique to use span tag having background color but, thing is button have border-radius. How do I achieve it in CSS?
Effect I'm trying to achieve
I think background-attachment: fixed will work for you.
.container {
display: inline-block;
width: auto;
}
.container .button {
border: 1px solid transparent;
color: #fff;
display: inline-block;
border-radius: 100px;
padding: 10px 40px;
background-image: linear-gradient(to right, red, blue, red);
background-attachment: fixed;
}<div class="container">
<div class="button">Hey</div>
<div class="button">World</div>
</div>Edit: I had to add 3rd parameter to background-attachment to make the blue more visible.
70
The background attachment method by Debsmita seems like a less trickier approach. An alternative would be to adjust the gradients of both buttons so the gradient of second button starts where the gradient of first button ends.
/* The small button's gradient starts from where medium button's gradient ends which causes the shared gradient effect. The large button is used for comparison. */
button {
color: white;
font-weight: 700;
cursor: pointer;
padding: 8px;
border-radius: 15px;
box-shadow: 0px 10px 16px -4px rgba(0, 0, 0, 0.49);
background: rgb(131, 58, 180);
}
button:focus {
outline: none;
/*For testing*/
}
.btn-md {
width: 40%;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 100%);
}
.btn-sm {
width: 20%;
background: linear-gradient(90deg, rgba(253, 29, 29, 1) 0%, rgba(252, 176, 69, 1) 100%);
}
.btn-lg {
display: block;
margin-top: 16px;
width: 60%;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}
/* Gradient from: https://cssgradient.io/ */
/* Box shadow from: https://www.cssmatic.com/box-shadow*/<body>
<button class="btn-md">2,333,333 Members</button>
<button class="btn-sm">Top #2</button>
<button class="btn-lg">2,333,333,333 Members</button>
</body>Edit: 07/29/2020 This version makes it easier to add additional buttons but it's still based on fixed values. The gradient spans across 1 to 4 buttons that are siblings. You can expand it for more buttons but you would have to add more color positions from the gradient.
/* A button's gradient starts from where the button to its left gradient ends which causes the shared gradient effect. The gradient is fixed across four buttons so each position will always have the same gradient.
Each button uses 2 gradients so for 4 button you need 5 gradients, with each of the 4 buttons using 25% of the full gradient. The color breakpoints were selected using cssgradient.io*/
:root {
--gradient1: rgba(131, 58, 180, 1);
--gradient2: rgba(182, 46, 117, 1);
--gradient3: rgba(253, 29, 29, 1);
--gradient4: rgba(253, 87, 45, 1);
--gradient5: rgba(252, 176, 69, 1);
}
.container {
margin-top: 16px;
}
button {
color: white;
font-weight: 700;
cursor: pointer;
padding: 8px;
margin-top: 20px;
border-radius: 15px;
box-shadow: 0px 10px 16px -4px rgba(0, 0, 0, 0.49);
}
button:focus {
outline: none;
/*For testing*/
}
.btn-grad-4 {
width: 20%;
background: var(--gradient1);
}
.btn-grad-4:nth-of-type(1) {
background: linear-gradient(90deg, var(--gradient1) 0%, var(--gradient2) 100%);
}
.btn-grad-4:nth-of-type(2) {
background: linear-gradient(90deg, var(--gradient2) 0%, var(--gradient3) 100%);
}
.btn-grad-4:nth-of-type(3) {
background: linear-gradient(90deg, var(--gradient3) 0%, var(--gradient4) 100%);
}
.btn-grad-4:nth-of-type(4) {
background: linear-gradient(90deg, var(--gradient4) 0%, var(--gradient5) 100%);
}
/* Gradient from: https://cssgradient.io/ */
/* Box shadow from: https://www.cssmatic.com/box-shadow*/<body>
<div class="container">
<button class="btn-grad-4">Top#1</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4">Top#2</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4">Top#2</button>
<button class="btn-grad-4">Top#3</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4">Top#2</button>
<button class="btn-grad-4">Top#3</button>
<button class="btn-grad-4">Top#4</button>
</div>
<div class="container">
<button class="btn-grad-4">Top#1</button>
<button class="btn-grad-4" style="width: 40%;">Top#2</button>
<button class="btn-grad-4">Top#3</button>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
