What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

In the HTML page, I have two buttons implemented with the following code:

<!-- Button for WIFI projects: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi">
    <div class="news_box news_box_01 hvr-underline-from-center " style="margin-right: 50px;"></div>
</a>

<!-- Button for PNSD projects: -->
<a title="PNSDe" href="javascript: void(0)" id="showPnsd_${item.index}" class="showPnsd">
    <div class="news_box news_box_02 hvr-underline-from-center "></div>
</a>

Below is the CSS that adds a background image to the div implementing the button:

.news_box_01 {
    background: rgba(0, 0, 0, 0) url("../../img/icons/projects/wifi_big_transparent_2.png") repeat scroll 0 0;
}

.news_box_02 {
    background: rgba(0, 0, 0, 0) url("../../img/icons/projects/PNSD.png") repeat scroll 0 0;  
}

My current issue is how to highlight the selected button when it's clicked by the user.

I am aware of using the :active selector to target a clicked link. However, I'm unsure of how to apply CSS effects like highlighting on the background image when the link is clicked.

Any ideas or suggestions would be greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

It seems like you're looking to implement changes after a click event.

$(".showWifi").on("mousedown", function() { 
    //This event fires when the mouse button is pressed down
    //Using "click" instead of "mousedown" requires the button to be pressed down and then released for the function to execute.

    $(this).addClass("highLightButton");

})

Feel free to reach out if you need any further clarification or assistance.

Answer №3

Utilize the :active selector within your css:

a:active .news-box{
/*
Implement some code here to create a visually appealing background effect!
*/
}

Therefore, whenever your a is active, the aforementioned css will be enforced on the child .news-box element of that a.

Edit:

The code for achieving this could resemble the following example: 

a{
  width:100px;
  margin:10px;
  border:1px solid #ddd;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  }
.news-box{
  
  padding:10px;
  background-color: #21B4C3;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
a:active .news-box{
 -webkit-animation: magicbg .92s infinite;
  -moz-animation: magicbg .92s infinite;
  -o-animation: magicbg .92s infinite;
  animation: magicbg .92s infinite;  
}

@-webkit-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-o-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-moz-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
<a href="#">
<div class="news-box">Button1</div>
</a>
<a href="#">
<div class="news-box">Button1</div>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The method by which AngularJS identifies the appropriate property within a return value

In Angular, watchers are utilized to identify property changes and trigger a listener function. An example of a watcher declaration is shown below: $scope.food = "chicken"; scope.$watch( function() { return food; }, function(newValue, oldValue) { ...

javascriptangularjs

Phantom-node failing to return the value from the page.evaluate function

My goal is to extract a specific element from a webpage and save it as an image locally. Here is the node.js code I am using with phantom-node: var phantom = require('phantom'); phantom.create().then(function(ph) { ph.createPage().then(funct ...

javascriptnode.jsphantomjsrect

Having trouble bringing in css files

I'm having trouble loading a CSS file when trying to import it into another CSS file. I've tried various ways of defining the path but nothing seems to work. Any insights on what might be causing this issue? https://i.sstatic.net/IwaY1.png ...

css

Encountering an Issue Executing Selenium Test on jQuery v2.0.2 and Play Framework

While I may not be a selenium expert, it seems that I've stumbled upon a bug when trying to utilize jQuery v2.0.2 with my Play Framework 2.2.1 application instead of the default jQuery v.1.9.0. Whenever I run "play test", I encounter the following err ...

javascriptjqueryseleniumplayframeworkplayframework-2.2

Exploring the intricacies of Node-Craigslist syntax

Greetings! I am currently utilizing the node-craigslist package found at https://github.com/brozeph/node-craigslist and I am in need of assistance with some syntax related to the details method. The documentation provides the following example: client . ...

javascriptnode.jsexpress

The only functioning href link is the last one

Currently, I am in the process of constructing a website using HTML and CSS. My goal is to create a white rectangle that contains 4 images, each serving as a clickable link redirecting users to different sections on the page. The issue I am facing is that ...

htmlcsshref

Issues with using hooks in a remote module in Webpack 5 module federation

I am attempting to create a dynamic system at runtime using Module Federation, a feature in webpack 5. Everything seems to be working well, but I encounter a multitude of 'invalid rule of hooks' errors when I add hooks to the 'producer' ...

javascriptreactjstypescriptwebpack

Convert all page links to post requests instead

Currently, I am working on a JavaScript project where my objective is to transform all links on the page into forms. This will enable the requests to be sent using the POST method rather than the GET method. The code I have implemented so far is as follow ...

javascripthtml

Using Three JS: Import an OBJ file, move it to the center of the scene, and rotate around it

I am trying to figure out how to load an OBJ file and translate its coordinates to the world origin (0,0,0) in order to make orbit controls function smoothly without using Pivot points. My goal is to automatically translate random OBJ objects with differe ...

javascriptthree.js3d-model

What is the method to choose an option from a dropdown menu that is devoid of the "select" tag using Selenium in Python?

I am analyzing the HTML code of a dropdown menu that I am interested in. Here is the link to the "Helpfulness" dropdown that I am referring to: After using Selenium to navigate to the page, I need to automate the process of selecting the first option in ...

pythonhtmlseleniumdrop-down-menu

jQuery: What's the Difference Between Triggering a Click and Calling a Function?

Imagine having certain actions assigned to a link using .click or .live, and wanting to repeat the same action later without duplicating code. What would be the right approach and why? Option 1: $('#link').click(function(){ //do stuff }); //c ...

javascriptjquery

What's Next? Redirecting Pages in Node.js Express after Handling POST Requests

Is it possible to redirect to a different page from a post request? module.exports = function(app) { app.post('/createStation', function(request, response){ response.redirect('/'); //I'm having trouble getting ...

javascriptnode.jsexpressnpmdao

Ways to display form choices that are influenced by other form selections

In my form, the user is supposed to choose a specific item at the end. As they fill in the initial options, the subsequent fields below change dynamically. Here is an example: Type: { t1:{ Number of X:{ 1:{...} 2:{...} ...

javascriptformsdependencies

Assigning binary messages a structure similar to JSON for the purpose of easy identification

Is there a way to differentiate binary messages from a server by tagging them with a type attribute? Currently, I am working with node.js and sending binary images as blobs to my client. However, I now also need to send other file types like .txt over the ...

javascriptjsonhtmlnode.jsbinary

How to access webpack's require.context feature on the development server

In my webpack development configuration, I have set up a mocked backend using Express. Following an example from the DevServer Docs, my setup looks something like this: module.exports = { // ... devServer: { setupMiddlewares: (middlewares, devServe ...

javascriptnode.jswebpacknode-modules

Interactive YouTube video in a responsive classroom environment

Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a s ...

htmlcssyoutuberesponsive-design

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

Is there a method to achieve greater accuracy when dividing a large number?

My requirement involves operating on Big Numbers, and I need the results to maintain precision, as demonstrated below: const BN = require('bn.js'); var a = 11060622312717714974 var b = 1570481433500000000000; console.log(a/b); //0.00704282271460 ...

javascriptnpmbignumber.js

Learn how to retrieve JSON data from the Yahoo Finance REST API using Angular 2

Currently, I am in the process of developing an application that needs to fetch data from the Yahoo Finance REST API. To retrieve a table for the symbol "GOOG," I have implemented the following code: export class ActService{ act = []; url = 'http ...

javascriptangularyahooyahoo-finance

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning