How to make a disappearing glow effect - css

Question

Let's say i have a button class
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
and whenever i click something(not the 'mat-cancel-color' button) i want this class to gain a glow effect which would fade away over .4s.
should i create a new class and then give that class the box-shadow(glow) property, then below transition-duration property and then the the box-shadow(no glow) property again? as such:
click-class {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
transition-duration: .4s;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
}
or does transition-duration only work when switching classes or does it also work when switching properties inside a class? if it as such, how should i go about it?
EDIT: mistook transition-delay with transition-duration.

Answer 1

What you are looking for is a CSS animation. Mainly because you don't want the default state with the glow, that's why transition won't work here.
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
.mat-cancel-color:hover {
animation-name: glow;
animation-duration: .4s;
}
.mat-cancel-color-trans {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
transition: all .4s ease;
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 0);
}
.mat-cancel-color-trans:hover {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
/* Standard syntax */
#keyframes glow {
0% {
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 1);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
}
<button class="mat-cancel-color">Button</button>
<button class="mat-cancel-color-trans">Button</button>

Answer 2

You could use some psudo classes like this:
:active:not(*element/class*) {...}
and then put the glow animation that you want within the brackets. :active is a psudo class that is only applied when the element named is clicked. :not() excludes the class listed in the parentheses. As long as you have the glow animation working fine, then this should work.
This is a snippet of my test code:
a:active:not(.mat-cancel-color) {...}