I wanna achieve the following result by using CSS:
So basically I want the circle to be on top of the button background but behind its border, with the button on top of the background
With the following code I am able to draw a similar button:
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
.container .circle {
position: absolute;
top: -21px;
right: -21px;
width: 40px;
height: 40px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: #4da6ff;
}
<div class="container">
<button>Test Button
<span class="circle"></span>
</button>
</div>
RESULT:
The problem here is that the circle is on top of the button, but also on top of its border.
Use two <div> elements and add classes to them. Set the border-radius to 50% for the “.circleBase”. Set the width, height, background, and border properties for the "circle1" and "circle2" classes separately. Now you can see the full example.
To place a button in the top right, there are several ways to do this. The easiest way to do this, Set “pull-right” in button class. Example: <!DOCTYPE html>. <html lang="en">. <head>. <title>. place button in top right corner. </title>.
In our snippet, we’ll demonstrate some examples with the CSS border-radius property, as well as with the HTML <canvas> and SVG <circle> elements. The most common one is using the border-radius property. We just need to set the border-radius property to 50% on the needed element to create curved corners. As you’ve already noticed, it’s quite easy.
How TO - Round Buttons Step 1) Add HTML: Example <button class="button button1"> 2px </button> <button class="button button2"> 4px... Step 2) Add CSS: Add rounded corners to a button with the border-radius property: Example .button { background-color:... W3.CSS Tutorial
One idea is to integrate the missing borders inside the circle
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
button:before {
content: "";
position: absolute;
top: -1px;
right: -1px;
transform:translate(50%,-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background:
linear-gradient(black,black) left /50% 2px,
linear-gradient(black,black) bottom/2px 50%,
#4da6ff;
background-repeat:no-repeat;
}
<div class="container">
<button>Test Button</button>
</div>
Or you can simply consider mix-blend-mode
. You have to pay attention to the value used as it will depend on the combination of the colors. In this case, the suitable one is darken
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
button:before {
content: "";
position: absolute;
top: -1px;
right: -1px;
transform:translate(50%,-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #4da6ff;
mix-blend-mode:darken;
}
<div class="container">
<button>Test Button</button>
</div>
A third way more fancy with only backgrounds:
button {
font-size: 20px;
border:0 solid transparent;
border-top-width:24px;
border-right-width:24px;
padding: 8px 20px;
background:
linear-gradient(black,black) top /100% 2px,
linear-gradient(black,black) bottom/100% 2px,
linear-gradient(black,black) left /2px 100%,
linear-gradient(black,black) right /2px 100%,
radial-gradient(circle, #4da6ff 19px,transparent 20px) left bottom/200% 200% padding-box border-box,
#e2e2e6 padding-box;
background-repeat:no-repeat;
}
<div class="container">
<button>Test Button</button>
</div>
Another idea is to place the circle behind the element and cut the background:
.container {
margin-top: 30px;
position:relative;
z-index:0;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
background:radial-gradient(circle at top right,transparent 19px,#e2e2e6 20px);
}
button:before {
content: "";
position: absolute;
z-index:-1;
top: -1px;
right: -1px;
transform:translate(50%,-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background:#4da6ff;
}
<div class="container">
<button>Test Button</button>
</div>
Use a pseudo element (::after
) to draw the border above the circle:
.container {
margin-top: 30px;
}
button {
position: relative;
font-size: 20px;
border: none;
padding: 8px 20px;
}
button::before {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
height: 40px;
border-radius: 25px;
background: #4da6ff;
content: '';
}
button::after {
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border: 2px solid black;
content: '';
}
<div class="container">
<button>Test Button</button>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With