I have 50 buttons on a site and when someone slicked on a button I want the color of that button to change but now the color of all the buttons change.
ALL THE BUTTONS LINK TO THE SAME PAGE
body {
background-color: #2D3E50
}
h1 {
font-size: 7vw;
color: white;
}
h2 {
font-size: 5vw;
color: white;
font-weight: normal;
}
div {
text-align: center;
text-align-last: center;
}
a:link {
background-color: #F19B42;
padding: 15px 16px;
align: center;
text-decoration: none;
display: inline-block;
margin: 4px;
margin-right: 0px;
font-family: monospace;
font-size: 15px;
color: white
}
.a:visited {
background-color: #5ABD9C;
color: white;
}
.ab:visited {
background-color: #5ABD9C;
color: white;
}
.ac:visited {
background-color: #5ABD9C;
color: white;
}
.ad:visited {
background-color: #5ABD9C;
color: white;
}
.ae:visited {
background-color: #5ABD9C;
color: white;
}
.af:visited {
background-color: #5ABD9C;
color: white;
}
.ag:visited {
background-color: #5ABD9C;
color: white;
}
.d:visited {
background-color: #5ABD9C;
color: white;
}
.da:visited {
background-color: #5ABD9C;
color: white;
}
.db:visited {
background-color: #5ABD9C;
color: white;
}
.dc:visited {
background-color: #5ABD9C;
color: white;
}
.dd:visited {
background-color: #5ABD9C;
color: white;
}
.de:visited {
background-color: #5ABD9C;
color: white;
}
.df:visited {
background-color: #5ABD9C;
color: white;
}
.dg:visited {
background-color: #5ABD9C;
color: white;
}
.e:visited {
background-color: #5ABD9C;
color: white;
}
.ea:visited {
background-color: #5ABD9C;
color: white;
}
.eb:visited {
background-color: #5ABD9C;
color: white;
}
.ec:visited {
background-color: #5ABD9C;
color: white;
}
.ed:visited {
background-color: #5ABD9C;
color: white;
}
.ee:visited {
background-color: #5ABD9C;
color: white;
}
.ef:visited {
background-color: #5ABD9C;
color: white;
}
.eg:visited {
background-color: #5ABD9C;
color: white;
}
.c:visited {
background-color: #5ABD9C;
color: white;
}
.ca:visited {
background-color: #5ABD9C;
color: white;
}
.cb:visited {
background-color: #5ABD9C;
color: white;
}
.cc:visited {
background-color: #5ABD9C;
color: white;
}
.cd:visited {
background-color: #5ABD9C;
color: white;
}
.ce:visited {
background-color: #5ABD9C;
color: white;
}
.cf:visited {
background-color: #5ABD9C;
color: white;
}
.cg:visited {
background-color: #5ABD9C;
color: white;
}
.b:visited {
background-color: #5ABD9C;
color: white;
}
.ba:visited {
background-color: #5ABD9C;
color: white;
}
.bb:visited {
background-color: #5ABD9C;
color: white;
}
.bc:visited {
background-color: #5ABD9C;
color: white;
}
.bd:visited {
background-color: #5ABD9C;
color: white;
}
.be:visited {
background-color: #5ABD9C;
color: white;
}
.bf:visited {
background-color: #5ABD9C;
color: white;
}
.bg:visited {
background-color: #5ABD9C;
color: white;
}
.f:visited {
background-color: #5ABD9C;
color: white;
}
.fa:visited {
background-color: #5ABD9C;
color: white;
}
.fb:visited {
background-color: #5ABD9C;
color: white;
}
.fc:visited {
background-color: #5ABD9C;
color: white;
}
.fd:visited {
background-color: #5ABD9C;
color: white;
}
.fe:visited {
background-color: #5ABD9C;
color: white;
}
.ff:visited {
background-color: #5ABD9C;
color: white;
}
.fg:visited {
background-color: #5ABD9C;
color: white;
}
.fh:visited {
background-color: #5ABD9C;
color: white;
}
.fi:visited {
background-color: #5ABD9C;
color: white;
}
.fj:visited {
background-color: #5ABD9C;
color: white;
}
.fk:visited {
background-color: #5ABD9C;
color: white;
}
.fl:visited {
background-color: #5ABD9C;
color: white;
}
.fm:visited {
background-color: #5ABD9C;
color: white;
}
body {
font-family: monospace;
}
<html>
<head>
<title>Dolf 50!</title>
<link rel="stylesheet" href="Opdrachten.css">
</head>
<body>
<h1 class="title">Dolf, golf, wolf.</h1>
<h2> Hieronder zie je alle woorden. Klik op het woord als je de foto hebt gemaakt waarvan je denkt dat deze het woord goed uitbeeld.</h2>
<a class="fe" href="./opdrachtclick.html">Fohnen...</a>
<a class="ae" href="./opdrachtclick.html">Snowboarden</a>
<a class="af" href="./opdrachtclick.html">Programmeren</a> <a class="da" href="./opdrachtclick.html">ING</a> <a class="ag" href="./opdrachtclick.html">Arduino/pi/dialog flow etc.</a> <a class="e" href="./opdrachtclick.html">Leren en inspireren</a>
<a
class="f" href="./opdrachtclick.html">Klussen / Doe het zelven</a>
<a class="b" href="./opdrachtclick.html">Nieuwe gadgets</a> <a class="ba" href="./opdrachtclick.html">Famillie</a> <a class="ea" href="./opdrachtclick.html">Non-alcohol</a> <a class="fh" href="./opdrachtclick.html">Dushi</a> <a class="fa" href="./opdrachtclick.html">Musea en culturele uitjes</a>
<a class="ab" href="./opdrachtclick.html">Zeilen</a> <a class="d" href="./opdrachtclick.html">Innovaties</a> <a class="ac" href="./opdrachtclick.html">Reizen</a> <a class="cd" href="./opdrachtclick.html">Goede vader</a>
<a class="ad" href="./opdrachtclick.html">Fotografie</a>
<a class="db" href="./opdrachtclick.html">Vakantie</a>
<a class="bb" href="./opdrachtclick.html">Jeugd van tegenwoordig</a> <a class="c" href="./opdrachtclick.html">V90</a> <a class="ec" href="./opdrachtclick.html">Rotterdam</a> <a class="eb" href="./opdrachtclick.html">Marathon NY rennnen</a>
<a class="fb" href="./opdrachtclick.html">Elektrisch fietsen </a>
<a class="fi" href="./opdrachtclick.html">Kannikaler </a>
<a class="bc" href="./opdrachtclick.html">Gezin </a> <a class="ca" href="./opdrachtclick.html">Oudercommissie ATC</a> <a class="dc" href="./opdrachtclick.html">Meisjesvoetbal</a> <a class="ad" href="./opdrachtclick.html">Curacao</a>
<a class="fc" href="./opdrachtclick.html">Mearlant Lyceum</a>
<a class="fj" href="./opdrachtclick.html">Blote voeten</a> <a class="fk" href="./opdrachtclick.html">Kruidvat</a>
<a class="bd" href="./opdrachtclick.html">Emilie & Quirijn</a> <a class="cb" href="./opdrachtclick.html">Luceline</a> <a class="dd" href="./opdrachtclick.html">Jansje</a> <a class="ed" href="./opdrachtclick.html">Netflix</a> <a class="fd" href="./opdrachtclick.html">Amazon</a>
<a class="be" href="./opdrachtclick.html">Aanbiedingen kopen</a> <a class="cc" href="./opdrachtclick.html">Grapjes maken</a> <a class="de" href="./opdrachtclick.html">Thee</a> <a class="ef" href="./opdrachtclick.html">Lekker snoepen</a> <a class="a"
href="./opdrachtclick.html">Golfen</a>
<a class="fl" href="./opdrachtclick.html">Op pad gaan</a>
<a class="bf" href="./opdrachtclick.html">Snurken</a> <a class="df" href="./opdrachtclick.html">Fijne echtgenoot</a> <a class="eg" href="./opdrachtclick.html">Detje, Jan, Ma & Pa, Charlotte</a> <a class="fg" href="./opdrachtclick.html">Op Agile wijze zaken aanpakken</a>
<a class="bg" href="./opdrachtclick.html">Slordig</a> <a class="ce" href="./opdrachtclick.html">Washington Post</a> <a class="dg" href="./opdrachtclick.html">Curacaose Pastechi</a> <a class="fm" href="./opdrachtclick.html">Lief</a>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</body>
</html>