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

Is it possible to render the v-for value dynamically?

Stylish CSS menu design

Transmitting information in segments using Node.js

Is there a way to efficiently import only a specific data array into a NextJs page without importing the entire component dynamically?

Extract information from an external website using AJAX in Laravel

Switch up the current Slick Carousel display by utilizing a div element

Creating a countdown timer that is determined by the word count of a specific <div> element

Exploring the Integration of Node Modules with React

Sending information from a Vuex module to a component following an axios request

Is there a way to calculate the number of days between two selected dates using the bootstrap date range picker?

Enhancing interactivity: Implementing a ripple effect for Card clicks in Material UI

What is the reason for browsers changing single quotation marks to double when making an AJAX request?

Utilizing Parallax.js within the React Framework

Code snippet in webpage body

This code snippet, document.location.search.replace('?redirect=', '').replace('%2F', ''), is failing to execute properly in Firefox

Initiating an AJAX request to a JSP file

Utilizing Font Awesome icons dynamically presents challenges when integrating with SVG & JavaScript

Issue with VueJS/Nuxt: When using this.$router.push, the wrong template is being returned to the <nuxt-link> tag

Should I install both dependencies for Moment.js Plugins?

Angular4 - Div with ngIf doesn't respond to click event