/* Styling för alla knappar */

button {
  width: 150px;
  height: 80px;
  color: blueviolet;
  border: none;
  background-color: transparent;
  margin: 20px;
  cursor: pointer;
  font-size: 1.5em;
}

/* Knapp 1*/

#one {
  border: 3px solid blueviolet;
  transition-duration: 700ms;
  transition-delay: 300ms;
}
#one:hover {
  background-color: blueviolet;
  color: #fff;
}

/* Knapp 2*/

#two {
  position: relative;
}
/* Detta kallas pseudoelement */
#two::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: blueviolet;
  transition-duration: 0.3s;
}
/* Detta kallas pseudoelement */
#two::before {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 0%;
  height: 2px;
  background-color: blueviolet;
  transition-duration: 0.3s;
}
#two:hover::after,
#two:hover::before {
  width: 100%;
}

/* Knapp 3*/

#three {
  position: relative;
  transition: 0.5s ease-out;
}
#three::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0%;
  background-color: blueviolet;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: 0.5s ease-in-out;
}
#three:hover {
  color: #fff;
}
#three:hover::after {
  height: 100%;
}

/* Knapp 4*/

#four {
  position: relative;
  transition-duration: 0.4s;
}

#four::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  background-color: blueviolet;
  top: 0;
  right: 0;
  transition: 0.4s;
  z-index: -1;
}

#four::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  background-color: blueviolet;
  bottom: 0;
  left: 0;
  transition: 0.4s;
  z-index: -1;
}
#four:hover {
  color: #fff;
}
#four:hover::after,
#four:hover::before {
  width: 100%;
  height: 100%;
}

/* Knapp 5*/

#five {
  position: relative;
}

#five::after {
  content: "";
  background-color: blueviolet;
  position: absolute;
  width: 0%;
  height: 2px;
  top: 0;
  left: 0;
  transition-duration: 0.3s;
}

#five::before {
  content: "";
  background-color: blueviolet;
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  right: 0;
  transition-duration: 0.3s;
}

#five-span::after {
  content: "";
  background-color: blueviolet;
  position: absolute;
  width: 2px;
  height: 0%;
  top: 0;
  right: 0;
  transition-duration: 0.3s;
}
#five-span::before {
  content: "";
  background-color: blueviolet;
  position: absolute;
  width: 2px;
  height: 0%;
  bottom: 0;
  left: 0;
  transition-duration: 0.3s;
}

#five:hover::after {
  width: 100%;
}
#five:hover > #five-span::after {
  transition-delay: 0.3s;
  height: 100%;
}
#five:hover::before {
  transition-delay: 0.6s;
  width: 100%;
}
#five:hover > #five-span::before {
  transition-delay: 0.9s;
  height: 100%;
}

/* Knapp 6*/
#six {
  position: relative;
  transition: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition-duration: 0.4s;
}

#six::after {
  content: "";
  position: absolute;
  background-color: blueviolet;
  width: 1%;
  height: 100%;
  left: 0;
  top: 0;
  transition: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition-duration: 0.4s;
  z-index: -1;
}

#six:hover {
  color: #fff;
}

#six:hover::after {
  width: 100%;
}

/* Knapp 7*/

#seven {
  position: relative;
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.4s;
}

#seven::after {
  content: "";
  position: absolute;
  background-color: blueviolet;
  width: 0%;
  height: 0%;
  top: 45%;
  left: 45%;
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.4s;
  z-index: -1;
  border-radius: 50%;
}
#seven:hover::after {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  border-radius: 0;
}
#seven:hover {
  color: #fff;
}