<html>

<head></head>

<body id="red">
  <div>

    <a href="#" role="button" id="bb" title="Click ☻" onclick="changeColor()"> Image</a>
  </div>
  <div>
    <a href="https://codepen.io/Jonas2007/full/rNLZKJG" title="Go ☺" class="bbn" target="_blank" id="fig">
      My first pen </a>
  </div>
  <div>
    <p class="tha"><b>Click</b></p>
    <p class="than"> <b>Than</b></p>
  </div>

</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap');
body {
  background: #cacaca;
  border: ridge 30px;
  border-radius: 0px;
  height: 639px;
}

::selection {
  background: red;
}

.bn {
  border: none;
  background: url("https://images.unsplash.com/photo-1499088513455-78ed88b7a5b4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}

#bb {
  text-decoration: none;
  animation: my 2s infinite alternate;
  border: ridge 15px;
  cursor: pointer;
  margin: auto;
  font-family: jokerman;
  color: darkred;
  position: absolute;
  user-select: none;
  top: 50%;
  left: 50%;
  padding: 10px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  text-align: center;
  font-size: 30px;
  background-image: radial-gradient(red, orange, yellow);
}

@keyframes my {
  from {
    border: ridge 15px white;
    cursor: pointer;
    padding: 10px;
    font-family: jokerman;
    color: darkred;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 20px;
    text-align: center;
    transition-duration: 3s;
    font-size: 30px;
    background-image: radial-gradient(red, orange, yellow);
  }
  to {
    border: ridge 15px;
    cursor: pointer;
    padding: 10px;
    font-family: jokerman;
    color: darkred;
    position: absolute;
    top: 50%;
    left: 50%;
    transition-duration: 3s;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 25px;
    text-align: center;
    font-size: 30px;
    background-image: radial-gradient(red, orange, yellow);
  }
}

#bb:hover {
  animation: mys 1s infinite alternate;
  background: black;
  border: ridge 15px;
}

@keyframes mys {
  from {
    color: white;
    background: black;
    border-color: white;
  }
  to {
    border-color: white;
    color: darkred;
    background: black;
  }
}

.bbn {
  border: ridge 15px;
  transition-duration: 1s;
  padding: 10px;
  font-family: vademecum, cursive;
  text-decoration: none;
  position: absolute;
  top: 80%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 20px;
  text-align: center;
  font-size: 30px;
  background-image: radial-gradient(yellow, orange, red);
}
.bbn:hover {
  color: black;
  border: black solid 15px;
}

.than {
  transition-duration: 0.4;
  font-family: vademecum, hanalei fill, sans-serif;
  position: absolute;
  top: 60%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 30px;
}

.tha {
  transition-duration: 0.4;
  font-family: vademecum, hanalei fill, sans-serif;
  position: absolute;
  top: 30%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 30px;
}

.first {
  border: ridge 15px;
  transition-duration: 3s;
  padding: 10px;
  font-family: vademecum;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  text-align: center;
  font-size: 30px;
  background-image: radial-gradient(yellow, orange, red);
}

.first:hover {
  color: white;
  border: solid 15px;
}
function changeColor() {
  let n = document.getElementById("red");
  n.className = "bn"; 
  n=1;
  if(n==1){
  var b = document.getElementsByTagName("DIV")[0];
    var m = document.getElementsByTagName("P")[1];
    var t =
    document.getElementsByTagName("P")[0];
    var p =
   document.getElementById("fig");
    p.className = "first";
  b.remove();
    m.remove();
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.