Question 42935 in Html Question posted in
Some basic documentation can be found here.

How to create button with linear gradient border, rounded corners and transparent background? – Html

I would like to create border with linear gradient border, rounded corners and transparent background.

I have:

.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: red
}
<div class="parent">
  <button class="btn-gradient-1">Button One</button>
  <button class="btn-gradient-2">Button Two</button>
</div>

Problem is that linear-gradient not accept transparent color value. Is there any hack? The button must have transparent background.

https://jsfiddle.net/c3ogjrzh/

Tags:

2

Answers


  1. 0

    Try this:

    .btn-gradient-1 {
  width: 100px;
  height: 40px;
  border: double 4px transparent;
  border-radius: 40px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: black;
}
    <div class="parent">
  <button class="btn-gradient-1">Button One</button>
  <button class="btn-gradient-2">Button Two</button>
</div>

    I used a combination of a linear gradient and a radial gradient for background.
    The background-origin and background-clip properties are used to specify that the linear gradient should only fill the padding area of the button, while the radial gradient should fill the border area.
    I applied my styles to the first button.

    Login or Signup to reply.
  2. 0

    To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

    Your transparency will start from darkblue (0 0 153) to darkorchid (153 50 204)

    linear-gradient(to right, rgba(0,0,153,0), rgba(153,50,204,1)) 

    .btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}
 
.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, rgba(0,0,153,0), rgba(153,50,204,1)) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}
 
.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: red
}
    <div class="parent">
  <button class="btn-gradient-1">Button One</button>
  <button class="btn-gradient-2">Button Two</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search