Making buttons stand out when clicked using CSS styling

Question

Making buttons stand out when clicked using CSS styling

Is there a way to make the selection of multiple items responsive on a /getmatch page? Currently, I have no visual indicator when I select things:

[]]1

What can be done to enhance the responsiveness of selecting multiple items?

Below is the code snippet from the page that generates these buttons:

{% extends "todo/base.html" %}

{% block content %}

   <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li.item {
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <section class="content-section-a">

    <div class="container">
      <dt>
        <span>Pick the keywords you want to express when wearing perfume</span>
      </dt>

    <form action = "/getmatch" method="POST">
      {% for keyword in keywords %}
        <div class="elements">
            <ul class="items ">
               <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
                 <div class="box">
                 <div data-toogle="buttons" class="col">
                    <span>{{ keyword.title }}</span>
                 </div>
                 </div>
               </li>
            </ul>
        </div>
      {% endfor %}
      {% csrf_token %}
        <button type="submit">Envoyer</button>
    </form>
    </div>
  </section>

  <!-- Bootstrap core JavaScript -->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/popper/popper.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >


{% endblock %}

I attempted to customize the button styles with the following CSS:

button:hover{background-color:orange;}

button:focus{background-color:red;}

Unfortunately, it did not produce the desired effect.

html css django bootstrap-4

Answer 1

Answer №1

I am unable to leave a comment because I do not have enough reputation points on Stack Overflow yet (apologies if this is against the rules). I am a bit confused about your intentions. If you want to visually indicate that a button has been selected among multiple buttons, you will need to retrieve the list of buttons, add an event listener for click events that toggles a specific class on and off, and then apply styling to that class for the desired effect.

Here's a suggestion on how to achieve this: I am not familiar with Django, but I believe you should consider the following approach as generating a ul element for each keyword seems unnecessary:

<form action = "/getmatch" method="POST">
    <div class="elements">
        <ul class="items " >
  {% for keyword in keywords %}

           <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
             <div class="box">
             <div data-toogle="buttons" class="col">
                <span>{{ keyword.title }}</span>
             </div>
             </div>
           </li>
  {% endfor %}
        </ul>
    </div>
  {% csrf_token %}
    <button type="submit">Submit</button>
</form>

To select the list elements, you might want to consider event delegation as it offers a more efficient solution. Learn more about it here: https://javascript.info/event-delegation. You can create a script tag or file and include it in your project with the following code snippet:

 //Select the UL list
const myItemsList = document.querySelector(".items");

//function passed to event listener as callback, toggles the selected class if the target is a list

const toggleListClass = (event) => {
  let target = event.target;
  if (target.tagName !== "li") return;
  target.classList.toggle("highlight");
};

//Add an event listener to the ul list
myItemsList.addEventListener("click", toggleListClass);

In your CSS, define a selector for the 'highlight' class:

.highlight {
  color: whatever;
}

Answer 2

I am unable to leave a comment because I do not have enough reputation points on Stack Overflow yet (apologies if this is against the rules). I am a bit confused about your intentions. If you want to visually indicate that a button has been selected among multiple buttons, you will need to retrieve the list of buttons, add an event listener for click events that toggles a specific class on and off, and then apply styling to that class for the desired effect.

Here's a suggestion on how to achieve this: I am not familiar with Django, but I believe you should consider the following approach as generating a ul element for each keyword seems unnecessary:

<form action = "/getmatch" method="POST">
    <div class="elements">
        <ul class="items " >
  {% for keyword in keywords %}

           <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
             <div class="box">
             <div data-toogle="buttons" class="col">
                <span>{{ keyword.title }}</span>
             </div>
             </div>
           </li>
  {% endfor %}
        </ul>
    </div>
  {% csrf_token %}
    <button type="submit">Submit</button>
</form>

To select the list elements, you might want to consider event delegation as it offers a more efficient solution. Learn more about it here: https://javascript.info/event-delegation. You can create a script tag or file and include it in your project with the following code snippet:

 //Select the UL list
const myItemsList = document.querySelector(".items");

//function passed to event listener as callback, toggles the selected class if the target is a list

const toggleListClass = (event) => {
  let target = event.target;
  if (target.tagName !== "li") return;
  target.classList.toggle("highlight");
};

//Add an event listener to the ul list
myItemsList.addEventListener("click", toggleListClass);

In your CSS, define a selector for the 'highlight' class:

.highlight {
  color: whatever;
}

Making buttons stand out when clicked using CSS styling

Answer №1

Similar questions

Is it possible to modify the inactive color of just one radio button in Framework7?

The CSS component located just below the dropzone

When using ui-router in AngularJS, the page refuses to scroll to a specific ID if its hash is already present in the URL

Create CSS rules to draw lines that stretch to the edges of the container

WordPress WooCommerce causing the right bar to be pushed below

Step by step guide on how to connect a stylesheet in CSS

Guide to showing a dropdown menu or any div on the right side of the screen

Issue with margin-top on <p> and <a> elements not displaying correctly?

Bootstrap does not control the text family, weight, and line height

Transform vertical and horizontal scrolling actions into solely horizontal scrolling using HTML and JS

The object initialization in Django does not have the attribute 'kwargs'

Navigate to the following section on an HTML page by clicking a button using jQuery

Ways to make all elements appear darker with the exception of one specific element

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

Modifying an ID on a different page using JavaScript while it is loading

Combining divs with identical values in Angular

Error encountered in personalizations field while sending multiple dynamic template emails through sendgrid

Creating a resilient CSS: DOM for seamless printing in PDF or on physical printers

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

Streamlining input options with a single label for multiple selections (radio buttons)