I am looking to achieve design similar to shown below:
It has a rounded border (ie., using border-radius), which is has gradient colour from left to right, which is as well semi transparent.
It also has background, which too has semi transparent background gradient.
I tried below ways:
Creating semi-transparent borders
CSS linear-gradient with semi-transparent borders
Button gradient borders with transparent background
JS Fiddle with code that I have tried so far:
https://jsfiddle.net/xobcr0h7/4/
body {
background:black;
--border: 5px;
}
div.button {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 50px;
border-radius: 30px;
/*try 1*/
/*background-color: rgba(255, 255, 255, 0.25);
border: 2px solid transparent;
background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15));*/
/*try 1*/
/*try 2*/
/*border: var(--border) solid transparent;
background: linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 1)), linear-gradient(to bottom, rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.2)) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
background-clip: content-box, border-box;
margin: 10px auto;
mix-blend-mode: multiply;*/
/*try 2*/
/*try 3*/
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, red, blue) border-box;
border: 4px solid transparent;
/*try 3*/
}<div class="button">Sign Up</div>But they all have solid colors or without border radius. I am trying to achieve something that has both with semitransparent background and border.
3
Answers
The easiest way is to use a color with an alpha value such as
rgba,hslaorhexwith 4 or 8 digits. The alpha sets a transparency to a color:I’m not sure if it meets your expectations, but it was the best I could achieve. Anyway, there are 3 CSS rules needed. One for the button itself, one for the button gradient and then one for the button border. For gradient and border the pseudo elements
::beforeand::aftercan be used. In the html part thedivcontainer as well as thespanare only for demonstation purposes and are not really needed.The button body
There is actually not much to say about this. First, give the button the basic design. The
backgroundproperty is only for fine tuning and if you want to blur everything behind the button you can usebackdrop-filter. The only important thing is to setposition: absoluteorposition: relative, so that it works perfectly with the pseudo elements.The button gradient
I think most of it is probably self-explanatory. As already mentioned, the pseudo element
::afteris used for the gradient effect. Again, it’s important to setposition:absoluteto make things work. Theopacityproperty is optional and only there for fine tuning. To avoid overlaying the button text, a negativez-indexmust also be used.The button border
Obviously the hardest part. For the border, the pseudo element
::beforeis used at last. As before, it’s important to setposition:absoluteand again, theopacityproperty is optional and only there for fine tuning. So how is this border made? By using thebackground-imageproperty to which a mix oflinear-gradientandradial-gradient(for the corners) is applied. But, to simplify things, I used CSS variables for the finally snippet. I first became aware of this technique through an article by Chris Coyier.A working snippet
Enough written, so here is a working example. As already said, for the sake of simplicity I used mostly CSS variables for the button design. Finally, I hope this helps and you might be able to do something with it.
I will use my previous answer to create the gradient border and the remaining should be easy