CODEWITHSUNDEEP
htmlcss
Emilie van Eps
Emilie van Eps

Reputation: 121

button should get a diffrent color when clicked on but instead the color of all buttons on that page change

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>

Upvotes: 3

Views: 417

Answers (4)

Jennifer Goncalves
Jennifer Goncalves

Reputation: 1514

These links all go to the same place, so the default "visited" link color will be applied to all buttons.

Instead of classes, change your links to use the hashtag.

For example, change:

<a  class="fe" href="./opdrachtclick.html" >Fohnen...</a>

To:

<a  class="fe" href="./opdrachtclick.html#fe" >Fohnen...</a>

Do this for all the links so they are unique and the "visited" pseudoselctor will work as intended.

Then for the CSS, you can just do:

a:visited {
    background-color: #5ABD9C;
    color: white;
}

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92597

Try 

a:focus {
  background: yellow;
}


a {
  padding: 10px;
  background: #aaa;
  border-radius: 5px;
  margin: 5px; 
  display: block;
}

a:focus {
  background: yellow;
}
<a  class="fe" href="#A" >Fohnen...</a>
<a class="ae" href="#B" >Snowboarden</a>
<a class="af" href="#C" >Programmeren</a> <a 
class="da" href="#D" >ING</a>

If you want to change color after click in persisten way you can use

a:visited {
  background: red;
}


a {
  padding: 10px;
  background: #aaa;
  border-radius: 5px;
  margin: 5px; 
  display: block;
}

a:visited {
  background: red;
}
<a  class="fe" href="#Z" >Fohnen...</a>
<a class="ae" href="#X" >Snowboarden</a>
<a class="af" href="#Y" >Programmeren</a> <a 
class="da" href="#W" >ING</a>

Upvotes: 2

Thengugi
Thengugi

Reputation: 321

a:link {
  color: #FF0000;
  text-decoration: none;
}

a:visited {
   color: #00FF00;
}
a:hover {
  color: #FF00FF;
  text-decoration: underline;
}
a:active {
  color: #0000FF;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lets mess around</title>
 
</head>
<body>
  <p><a href="#">Awesome</a></p>
</body>
</html>

CSS Links have Four different states

`:link`,`:visited`,`:hover`, `:active` 

a:link -Styles links that have not been visited.
a:visited -styles a link that has been visited but mouse pointer isn't there.
a:hover-styles a link when a mouse pointer is on the element.
a:active-styles a link that has been clicked and mouse is on top of it.

Upvotes: 0

Kevin Brown
Kevin Brown

Reputation: 12650

All the links are the same. Try changing the hrefs to different locations and it should behave correctly. The :visited selector works against the href visited in the browser's URL history, not the name.

Upvotes: 1

Related Questions