Box with plus symbol

Question

Box with plus symbol

One of my current projects involves creating a pill button with the following styling:

<button class="button">Pill Button</button>
.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

I'd like to add a cross inside this button, which will allow users to remove it from the page when clicked. The image for the cross can be found here. Can you advise on how I can achieve this functionality?

html css bootstrap-4

Answer 1

Answer №1

If you want to enhance the functionality of this button, consider adding another element and triggering a click event.

function expandBtn(){
 console.log('expand button clicked');
 event.stopPropagation();
}
function btnPress(){
 console.log('button pressed')
}

.custom-button {
  border: 1px solid blue;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 6px 4px;
  cursor: pointer;
  border-radius: 20px;
}

<button onclick='btnPress()' class="custom-button">Round Button <span onclick='expandBtn()'> expand</span></button>

Answer 2

If you want to enhance the functionality of this button, consider adding another element and triggering a click event.

function expandBtn(){
 console.log('expand button clicked');
 event.stopPropagation();
}
function btnPress(){
 console.log('button pressed')
}

.custom-button {
  border: 1px solid blue;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 6px 4px;
  cursor: pointer;
  border-radius: 20px;
}

<button onclick='btnPress()' class="custom-button">Round Button <span onclick='expandBtn()'> expand</span></button>

Answer 3

Answer №2

If you want the button and X to have the same function, simply use the remove method.

const btns = document.querySelectorAll("[data-action='delete']");
btns.forEach(function(btn) {
  btn.addEventListener("click", function(evt) {
    const clickedElem = evt.target.closest('button');
    clickedElem.remove();
  });
});

[data-action="delete"]::after {
  padding-left: .3rem;
  content: '\2297';
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2869c849c80">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-outline-danger" data-action="delete">Something 2</button>
<button type="button" class="btn btn-outline-danger" data-action="delete">Something 2</button>

If you prefer the X and button to perform different actions, it's best to make them separate elements.

const groups = document.querySelectorAll(".btn-group");
groups.forEach(function (group) {
  group.addEventListener("click", function (evt) {
    const clickedElem = evt.target.closest('[data-action]');
    if(clickedElem.dataset.action === 'remove') {
      clickedElem.closest('.btn-group').remove();
    } else {
      console.log(clickedElem.textContent);
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252263c243c20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" data-action="details">Something 1</button>
  <button type="button" class="btn btn-outline-danger" data-action="remove">&otimes;</button>
</div>


<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" data-action="details">Something 2</button>
  <button type="button" class="btn btn-outline-danger" data-action="remove">&otimes;</button>
</div>

Answer 4

If you want the button and X to have the same function, simply use the remove method.

const btns = document.querySelectorAll("[data-action='delete']");
btns.forEach(function(btn) {
  btn.addEventListener("click", function(evt) {
    const clickedElem = evt.target.closest('button');
    clickedElem.remove();
  });
});

[data-action="delete"]::after {
  padding-left: .3rem;
  content: '\2297';
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2869c849c80">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-outline-danger" data-action="delete">Something 2</button>
<button type="button" class="btn btn-outline-danger" data-action="delete">Something 2</button>

If you prefer the X and button to perform different actions, it's best to make them separate elements.

const groups = document.querySelectorAll(".btn-group");
groups.forEach(function (group) {
  group.addEventListener("click", function (evt) {
    const clickedElem = evt.target.closest('[data-action]');
    if(clickedElem.dataset.action === 'remove') {
      clickedElem.closest('.btn-group').remove();
    } else {
      console.log(clickedElem.textContent);
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252263c243c20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" data-action="details">Something 1</button>
  <button type="button" class="btn btn-outline-danger" data-action="remove">&otimes;</button>
</div>


<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" data-action="details">Something 2</button>
  <button type="button" class="btn btn-outline-danger" data-action="remove">&otimes;</button>
</div>

Answer 5

Answer №3

Here is a way to conceal the X inside the button:

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  display: block;
  max-width: 90px;
}

.button:after {
  content: "\271A";
  background: red;
  color: white;
  transform: rotate(45deg);
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 30px;
  top: 17px;
  left: 115px;
}

.two:after {
  content: none;
}

#undoer,
:target {
  display: none;
}

:target+#undoer {
  display: block;
}

<a href="#start" id="start" class="button">Pill button</a>
<a href="#stop" id="undoer" class="button two">Pill button</a>

To completely conceal the button:

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  display: block;
  max-width: 90px;
}

.button:after {
  content: "\271A";
  background: red;
  color: white;
  transform: rotate(45deg);
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 30px;
  top: 17px;
  left: 115px;
}

.button:target {
  display: none;
}

<a href="#start" id="start" class="button">Pill button</a>

Answer 6

Here is a way to conceal the X inside the button:

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  display: block;
  max-width: 90px;
}

.button:after {
  content: "\271A";
  background: red;
  color: white;
  transform: rotate(45deg);
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 30px;
  top: 17px;
  left: 115px;
}

.two:after {
  content: none;
}

#undoer,
:target {
  display: none;
}

:target+#undoer {
  display: block;
}

<a href="#start" id="start" class="button">Pill button</a>
<a href="#stop" id="undoer" class="button two">Pill button</a>

To completely conceal the button:

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  display: block;
  max-width: 90px;
}

.button:after {
  content: "\271A";
  background: red;
  color: white;
  transform: rotate(45deg);
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 30px;
  top: 17px;
  left: 115px;
}

.button:target {
  display: none;
}

<a href="#start" id="start" class="button">Pill button</a>

Box with plus symbol

Answer №1

Answer №2

Answer №3

Similar questions

Creating a dynamic table accordion with PHP and MySQL

Utilizing the power of HTML5 canvas technology, coupled with advanced

Transferring class titles between div elements

Pushing down menu items in a dropdown CSS navigation bar

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

css, align top menu

Lumx motion not functioning properly

The styling in Docker for Asp.Net Core is not being properly displayed

Refresh data after modal is closed in AngularJS

Is there a method to automatically execute an 'onchange' function whenever a value is updated due to an AJAX response?

Problem with AngularJS function execution - require a delay in executing the second function

Converting SQL table data into an array using JavaScript

Websites are operating at a sluggish pace

Having difficulty linking a subclass in HTML with CSS

What is the best way to conceal the blackberry cursor in a web browser?

Tips for identifying HTML tags that include a specific attribute automatically

Having a peculiar margin problem in IE11 - potential connection between overflow and smooth scrolling

Send JavaScript variable using a query parameter

I recently ran npm install --save bootstrap and now I am unable to locate the bootstrap.min.css file anywhere

Combining CSS styles