The most effective way to code overlapping html buttons

Question

The most effective way to code overlapping html buttons

Can you help me figure out how to make clickable areas on my HTML5 web page without them overlapping? Here's what I'm trying to do:

I want the red, blue, and green areas to be clickable links, but not overlap. For example, when clicking on the far right edge of the Blue 'B' circle, I don't want the green area to be clicked. Additionally, I'd like the white-space between the links to be inactive.

I've tried using SVG buttons, but I'm having trouble with defining the clickable areas (viewbox?). What would be the best approach to achieve this?

Here's my attempt using SVG...

<a href="#">
  <svg>
    <path id="button-svg-right" d="M0,100 L100,100 L100,0 L0,0 C27.6142375,0 50,22.3857625 50,50 C50,77.6142375 27.6142375,100 0,100 L0,100 Z"></path>
  </svg>
</a>

javascript jquery html css svg

Answer 1

Answer №1

Create a central absolute white <span> circle that is not interactive.
Experiment with paddings and borders until you achieve the desired dimensions.

.btns{
  position: relative;
  height: 30px;
}
.btns button{
  cursor:pointer;
  outline: none;
  border:none;
  height: inherit;
  width: 50px;
  color: #fff;
  font-weight:bold;
  font-size:24px;
}
.btns button:hover{
  opacity:0.7;
}
.btns > button:first-child{
  background: red;
  padding-right:20px;
}
.btns > button:last-child{
  background: green;
  padding-left:20px;
}
.btns span{
  left: 32px;
  position: absolute;
  z-index:1;
  width: 30px;
  height: inherit;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #fff; margin-top:-5px;
}
.btns span button{
  width: inherit; border-radius: inherit;
  background: blue;
}

<span class="btns">
  <button>-</button>
  <span>
    <button>B</button>
  </span>
  <button>+</button>  
</span>

Answer 2

Create a central absolute white <span> circle that is not interactive.
Experiment with paddings and borders until you achieve the desired dimensions.

.btns{
  position: relative;
  height: 30px;
}
.btns button{
  cursor:pointer;
  outline: none;
  border:none;
  height: inherit;
  width: 50px;
  color: #fff;
  font-weight:bold;
  font-size:24px;
}
.btns button:hover{
  opacity:0.7;
}
.btns > button:first-child{
  background: red;
  padding-right:20px;
}
.btns > button:last-child{
  background: green;
  padding-left:20px;
}
.btns span{
  left: 32px;
  position: absolute;
  z-index:1;
  width: 30px;
  height: inherit;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #fff; margin-top:-5px;
}
.btns span button{
  width: inherit; border-radius: inherit;
  background: blue;
}

<span class="btns">
  <button>-</button>
  <span>
    <button>B</button>
  </span>
  <button>+</button>  
</span>

The most effective way to code overlapping html buttons

Answer №1

Similar questions

Why isn't the pipe working when trying to extract the last 2 characters using

A dedicated folder for hosting the static assets generated by Nuxt.js

Encountering a connection error when trying to access a Google spreadsheet within a Next.js application

Employ the faker.js library to automatically create a form within casperjs environment

Having trouble getting JavaScript to select a stylesheet based on time?

Moving SVG fill in a continuous loop

Changing the font color of the status bar in a PWA on Chrome Desktop: A step-by-step guide

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

Using Selenium to interact with a link's href attribute through JavaScript

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

How can I retrieve a specific key from a nested array while using ng-repeat to iterate through it

Having trouble fetching results from AJAX objects using vanilla JavaScript?

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

Retrieve and display the number of items in the shopping cart directly from localStorage using React

Unable to retrieve assets via ajax

What is the best way to ensure that TwentyTwenty.js images are always positioned in the

Out-of-sync movement in animated characters

Creating a jsp page content with jquery and retrieving request parameters

Switch the script: convert from jQuery to traditional JavaScript code