Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a circle on the top right corner of a button above the background and behind the border?

Tags:

html

css

I wanna achieve the following result by using CSS:

CSS Circle behind border and above background

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:

enter image description here

The problem here is that the circle is on top of the button, but also on top of its border.

like image 218
Shaunyl Avatar asked Nov 04 '19 20:11

Shaunyl


People also ask

How to add a border around a circle in HTML?

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.

How to place a button in the top right corner?

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>.

How to create curved corners with CSS border-radius?

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 with CSS?

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


2 Answers

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>
like image 124
Temani Afif Avatar answered Nov 15 '22 07:11

Temani Afif


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>
like image 34
Ori Drori Avatar answered Nov 15 '22 09:11

Ori Drori