What is the process for designing a button with a circular element connected to its left edge?

Question

What is the process for designing a button with a circular element connected to its left edge?

I am currently working on creating a unique button design using a combination of HTML and CSS. The button is rectangular on three sides, with a circular section attached to the right side where the buttons border seamlessly wraps around it.

Below is an image showcasing the button design I aim to achieve:

View Button Design

Here is the code that I have developed so far:

#GetOTPBlock {
   display: flex;
   width: fit-content; 
   padding: 8px
}
.get-otp {
   font-size: 10px;
    padding: 4px;
    border: solid 2px #849dad;
    border-radius: 50%;
    font-weight: bold;
    color: #747f86;
    background-color: #f1f1f1;
    z-index: 333;
}

<div class="row" id="GetOTPBlock">
  <span class="get-otp">OR</span>
  <div id="GetOTPBlockAction">
    <a href="javascript:void(0);" title="Get OTP">Get OTP</a>
  </div>
</div>

html css

Answer 1

Answer №1

One way to achieve this is by wrapping the get-otp element around the GetOTPBlock in your HTML structure. You have the flexibility to customize it according to your requirements.

#GetOTPBlock{
  position:relative;
  margin:1rem;
}

#GetOTPBlock .get-otp{
  position:absolute;
  width:2rem;
  height:2rem;
  top:50%;
  transform:translateY(-50%);
  left:-1rem;
  background-color: white;
  color: #849dad;
  display:grid;
  place-items:center;
  border: 2px solid #849dad;
  border-radius:50%;
  pointer-events:none;
}

#GetOTPBlock a{
  color:white;
  text-decoration:none;
  padding:1rem 2rem;
  display:inline-block;
  background-color:#849dad;
  border-radius:5px;
}

<div class="row" id="GetOTPBlock">
  <span class="get-otp">OR</span>
  <div id="GetOTPBlockAction">
    <a href="javascript:void(0);" title="Get OTP">Get OTP</a>
  </div>
</div>

If you can modify your HTML structure, a simpler approach would be using a pseudo-element:

#GetOTPBlockAction{
  position:relative;
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  display: inline-block;
  background-color: #849dad;
  border-radius: 5px;
  margin:1rem;
}

#GetOTPBlockAction::before {
  content:"Or";
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  transform: translateY(-50%);
  left: -1rem;
  background-color: white;
  color: #849dad;
  display: grid;
  place-items: center;
  border: 2px solid #849dad;
  border-radius: 50%;
  pointer-events: none;

}

<a id="GetOTPBlockAction" href="javascript:void(0);" title="Get OTP">Get OTP</a>

Answer 2

One way to achieve this is by wrapping the get-otp element around the GetOTPBlock in your HTML structure. You have the flexibility to customize it according to your requirements.

#GetOTPBlock{
  position:relative;
  margin:1rem;
}

#GetOTPBlock .get-otp{
  position:absolute;
  width:2rem;
  height:2rem;
  top:50%;
  transform:translateY(-50%);
  left:-1rem;
  background-color: white;
  color: #849dad;
  display:grid;
  place-items:center;
  border: 2px solid #849dad;
  border-radius:50%;
  pointer-events:none;
}

#GetOTPBlock a{
  color:white;
  text-decoration:none;
  padding:1rem 2rem;
  display:inline-block;
  background-color:#849dad;
  border-radius:5px;
}

<div class="row" id="GetOTPBlock">
  <span class="get-otp">OR</span>
  <div id="GetOTPBlockAction">
    <a href="javascript:void(0);" title="Get OTP">Get OTP</a>
  </div>
</div>

If you can modify your HTML structure, a simpler approach would be using a pseudo-element:

#GetOTPBlockAction{
  position:relative;
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  display: inline-block;
  background-color: #849dad;
  border-radius: 5px;
  margin:1rem;
}

#GetOTPBlockAction::before {
  content:"Or";
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  transform: translateY(-50%);
  left: -1rem;
  background-color: white;
  color: #849dad;
  display: grid;
  place-items: center;
  border: 2px solid #849dad;
  border-radius: 50%;
  pointer-events: none;

}

<a id="GetOTPBlockAction" href="javascript:void(0);" title="Get OTP">Get OTP</a>

Answer 3

Answer №2

To create a circular design, you can utilize the CSS property position: absolute on the circle element and simultaneously use position: relative on the button element to position the circle in relation to the button. By adjusting the values of top: 0 or left: 0, you can control the placement of the circle based on the dimensions of your button.

An alternative approach is to apply a box-shadow effect to produce a secondary circle underneath the original one, giving the impression of a bordered appearance.

.main-btn {
  all: unset; /* Remove default styles */
  border-radius: 20px;
  width: 100px;
  height: 40px;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  position: relative; /* Establishes positioning context for the circle */
}

.circle {
  background-color: black;
  position: absolute;
  border-radius: 50%;
  color: white;
  width: 20px;
  height: 20px;
  top: 10px; /* Half of the circle's height */
  left: -5px;
  box-shadow: 0px 0px 0 1.5px red; /* Creates a duplicated circle with red shadow */
}

<button class="main-btn">
<div class="circle"></div>
</button>

Answer 4

To create a circular design, you can utilize the CSS property position: absolute on the circle element and simultaneously use position: relative on the button element to position the circle in relation to the button. By adjusting the values of top: 0 or left: 0, you can control the placement of the circle based on the dimensions of your button.

An alternative approach is to apply a box-shadow effect to produce a secondary circle underneath the original one, giving the impression of a bordered appearance.

.main-btn {
  all: unset; /* Remove default styles */
  border-radius: 20px;
  width: 100px;
  height: 40px;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  position: relative; /* Establishes positioning context for the circle */
}

.circle {
  background-color: black;
  position: absolute;
  border-radius: 50%;
  color: white;
  width: 20px;
  height: 20px;
  top: 10px; /* Half of the circle's height */
  left: -5px;
  box-shadow: 0px 0px 0 1.5px red; /* Creates a duplicated circle with red shadow */
}

<button class="main-btn">
<div class="circle"></div>
</button>

Answer 5

Answer №3

Utilizing the ::before pseudo-element in your CSS can be done as follows:

.otp_button {
    padding: 10px 20px;
    background-color: rgb(71, 73, 111);
    color: #fff;
    border-style: none;
    border-radius: 5px;
    position: relative;

}
.otp_button::before {
    position: absolute;
    content: "or";
    text-transform: uppercase;
    left: -10px;
    background-color: rgb(177, 177, 177);
    font-size: 10px;
    border-radius: 100%;
    padding: 3px;
    border: 1px solid #000;
}

<button class="otp_button">Get OTP</button>

Answer 6

Utilizing the ::before pseudo-element in your CSS can be done as follows:

.otp_button {
    padding: 10px 20px;
    background-color: rgb(71, 73, 111);
    color: #fff;
    border-style: none;
    border-radius: 5px;
    position: relative;

}
.otp_button::before {
    position: absolute;
    content: "or";
    text-transform: uppercase;
    left: -10px;
    background-color: rgb(177, 177, 177);
    font-size: 10px;
    border-radius: 100%;
    padding: 3px;
    border: 1px solid #000;
}

<button class="otp_button">Get OTP</button>

What is the process for designing a button with a circular element connected to its left edge?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to specifically modify the color of the last digits in a number?

Using JQuery, you can predominantly focus on an html element by referencing its title tag

What is the best way to extract the innerHTML of every button and exhibit it in a text box?

Sticky sidebar panel featuring a stationary content block

When hovering on the list items, the text-decoration with a border-bottom and vertically centered unordered list "jumps"

Guide on creating a square within an element using JavaScript

Two collapsible menus featured in the navigation bar

Vuetify Container with a set maximum width that remains fixed

jQuery's promise method in CSS is executed successfully

Looking to extract a Twitter handle using Python's BeautifulSoup module?

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

What could be causing my Bootstrap navbar menu item to move to the line beneath it when there is centered text?

How can I access a component variable within the styles in Angular?

Struggling to access a JSON file using Angular framework

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

Is receiving an error message about a "stray start tag footer" in your HTML validator?

Incorporating JSTree Into Your Website's Heading: A Step-By-Step

Dynamic reloading of a div with form data using jQuery's AJAX functionality

Struggling with the navbar-toggler in Bootstrap 4 Beta 2?

Checking the size of an HTML numerical input field?