Create a circular status button that overlays on top of another element using CSS

Question

Create a circular status button that overlays on top of another element using CSS

Looking to enhance my CSS skills! Seeking advice on creating a status button that changes color based on chat availability and positioning it on top of another button.

https://i.sstatic.net/iU8wi.png

html css

Answer 1

Answer №1

To achieve the desired layout, make use of the position property.

Check out a sample code snippet here.

Here are some useful resources:

Answer 2

To achieve the desired layout, make use of the position property.

Check out a sample code snippet here.

Here are some useful resources:

Answer 3

Answer №2

Based on the image, it seems like you can achieve the desired button style without stacking multiple HTML elements. Instead, you can utilize CSS properties such as border and background-color.

I have provided the code snippet below that includes some JavaScript functionality to toggle the button status. The JavaScript part is optional for styling purposes; if you are not familiar with JavaScript, feel free to skip that section.

let isOpen = false;
const btn = document.querySelector("#btn");
const dot = document.querySelector(".dot");
const txt = document.querySelector("#text");

btn.addEventListener("click", () => {
  if (isOpen) {
    dot.style.backgroundColor = "red";
    txt.innerHTML = "The chat is now closed";
  } else {
    dot.style.backgroundColor = "green";
    txt.innerHTML = "The chat is now open";
  }
  isOpen = !isOpen;
});

.dot {
  height: 25px;
  width: 25px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  border: 5px solid gray;
}

#wrapper {
  border: 1px solid black;
  text-align: center;
  padding: 10px;
}

#btn {
  margin-top: 10px;
}

<div id="wrapper">
  <span class="dot"></span>
  <p id="text">The chat is now closed</p>
</div>

<button id="btn">Toggle</button>

Answer 4

Based on the image, it seems like you can achieve the desired button style without stacking multiple HTML elements. Instead, you can utilize CSS properties such as border and background-color.

I have provided the code snippet below that includes some JavaScript functionality to toggle the button status. The JavaScript part is optional for styling purposes; if you are not familiar with JavaScript, feel free to skip that section.

let isOpen = false;
const btn = document.querySelector("#btn");
const dot = document.querySelector(".dot");
const txt = document.querySelector("#text");

btn.addEventListener("click", () => {
  if (isOpen) {
    dot.style.backgroundColor = "red";
    txt.innerHTML = "The chat is now closed";
  } else {
    dot.style.backgroundColor = "green";
    txt.innerHTML = "The chat is now open";
  }
  isOpen = !isOpen;
});

.dot {
  height: 25px;
  width: 25px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  border: 5px solid gray;
}

#wrapper {
  border: 1px solid black;
  text-align: center;
  padding: 10px;
}

#btn {
  margin-top: 10px;
}

<div id="wrapper">
  <span class="dot"></span>
  <p id="text">The chat is now closed</p>
</div>

<button id="btn">Toggle</button>

Create a circular status button that overlays on top of another element using CSS

Answer №1

Answer №2

Similar questions

Manipulate jQuery to set the table row containing empty table data cells to be lower than the row with

Using HTML <style> in a bash script is a great way to enhance

What is the best way to make content stretch to 100% width when there is no content in the sidebar?

Achieving the perfect button using a combination of material-ui and styled-components

The background on my modal remains unchanged

The .keypress() function isn't behaving as expected

What is the best way to apply a :visited selector specifically to the most recently visited webpage?

Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

Is there a way to showcase English and CJK text vertically with CSS?

Changing the CSS background in React when updates occur

New HTML5 feature enables users to upload images onto canvas, enabling them to drag, rotate, and even

Is there a way to send all the results of a Flask database query to a template in a way that jQuery can also access

What is the best way to cut off multiple lines of text and display the remaining strings at the

Issue with scrolling to the bottom of collapsed sections in Bootstrap

CSS transformation incomplete

Spinning a CSS object around an axis

Struggling with transitioning from table layout to CSS, specifically encountering difficulty in aligning all elements properly

rearranging the positioning of links in the HTML navbar

Extracting information from a checkbox list displayed within an HTML table

Why does the video cover extend past its lower boundary in HTML?