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.
I will use my previous answer to create the gradient border and the remaining should be easy
button {
--b: 5px; /* border thickness */
--r: 20px; /* radius */
font-size: 25px;
border: none;
padding: 10px 20px;
position: relative;
background: rgb(255 255 255/50%); /* background color with alpha */
border-radius: var(--r);
}
button::before {
content:"";
position: absolute;
inset: calc(-1*var(--b));
padding: var(--b);
border-radius: calc(var(--b) + var(--r));
background: linear-gradient(90deg,red,green); /* gradient border */
opacity: .5; /* alpha for border */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
background: linear-gradient(90deg,#000,#ccc);
}
<button>A button</button>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments