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

concave rectangle with transparent gradient – Html

I need a simple button with a color gradient and a transparent gradient layover faking a light glare. In the old days I created just the button with color gradient (red to dark red) and set a layer with a transparent gradient (white, with opacity 0.25 to 0.50) over the button.

Like this Button:
concave rectangle with transparent gradient

But I have big problem with a concave horizon line:
concave rectangle with transparent gradient

I marked it here with a theoretically line, just for better understanding.

Tryout code on fiddle:
I’ve been experimenting a bit with concave background settings here. But then I get no transparent history.

#wrapper {
  background: grey;
  padding: 25px;
}

#test {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 25px;
    border-radius: 20px;
    background: #888888;
    background:
      radial-gradient(circle 400px at 50% 266%, rgba(0,0,250,0.1), rgba(0,0,250,0.1) 100%, red 100%);
    background-size:200px 200px, 200px 200px;
    background-position:0 0,0 0;
    background-repeat:no-repeat;
}
<div id="wrapper">
  <div id="test">B1</div>
  <div id="test">B2</div>
</div>

But my CSS 2 skills are totally outdated.
Hence the question of whether there is a better solution for my financial button.

Does anyone have an idea how I can create such a button (like the red one in the first picture)? There may now be much more modern and simpler solutions. – It is important that the horizon line is concave (laterally downwards) and not convex (ellipse downwards in the middle). Exactly as shown in the graphic.

I have to deal a lot more with CSS-3 and the latest technologies to improve my skills.

Tags:

2

Answers


  1. 0

    You can accomplish this with one element and a radial gradient.

    button {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 150px, #B31609, #D5000C 69%, #DD3C3F 50%, #F0A696 100%);
}
    <button></button>
    Login or Signup to reply.
  2. 0

    You can overlay multiple gradients, one on top of the other. I’ve used a transparent circular radial gradient to fade out the button with an edge then put a linear gradient below it. You can then use CSS custom properties to set the button colour to whatever you like. Code below. Twiddle about with the opacity values in the rgba() property to get the effect you’re looking for.

    Edited as the radius can’t be a percentage value, I’ve used a custom property so that the button radius scales with the button size so you can use buttons of different widths and it’ll scale up okay.

    #wrapper {
  background: grey;
  padding: 25px;
}

.button {
    display: inline-grid;
    place-items:center;
    --width:200px;
    width: var(--width);
    aspect-ratio:1/1;
    margin-right: 25px;
    border-radius: 20px;
    --button-colour: blue;
    background:
      radial-gradient(
        circle calc(var(--width) * 4) at 50% 270%,
        transparent 50%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,1) 75%),
      linear-gradient(
        var(--button-colour),
        var(--button-colour)
      );
}

.red {
  --button-colour:red;
}

.green {
  --button-colour:green;
}

.blue {
  --button-colour:blue;
}

.small {
 --width:100px;
}
    <div id="wrapper">
  <div class='red button'>Red</div>
  <div class='green button'>Green</div>
  <div class='blue button'>Blue</div>
  <div class='small blue button'>Blue</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search