How to make a block with rounded edges and a gradient border?
Using the example of a button, I have created a non-standard approach, but is there a more correct semantically correct approach in solving such problems? And why, when you click on the button, the word Continue twitches, how is it "cured"?
*, *::before, *::after { box-sizing: border-box; } body { background: #050B1F; } /* Верхний слой */ #button-continue { margin-top: 46px; width: 331px; height: 54px; border: 3px solid transparent; border-radius: 56px; background-color: rgba(11, 27, 55, 1); position:relative; cursor:pointer; } /* нижний слой (Градиент) */ #button-continue::after { content: ""; width:337px; height:60px; position:absolute; z-index:-5; top:-6px; left:-6px; border-radius: 56px; background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 100px); } .button-continue__text { text-transform: uppercase; font-size: 0.875em; color: #99CEFF; font-weight: 400; } .button-continue__text::after { content: url('img/icon-continue.svg'); position: relative; top: 3px; left: 10px; } <button id="button-continue"> <span class="button-continue__text">Continue</span> </button> 
