<link href="style.css"rel ="stylesheet">
<button class="button1 round"> knap 1 </button>
<a href=https://www.google.dk/> <button class="button2"> Google </button> </a>
<button class="button3"> knap 3</button>
<iframe width="560" height="315" src="https://www.youtube.com/embed/O2ulyJuvU3Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

.button1 {
  color:white;
  background-color:black;
  font-size: 50px;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.button1:hover {
  background-color: purple;
  color: black;
  font-size: 60px;
  border-radius: 20px;
}
.button1:active {
  background-color:green;
  color: orange;
  font-size: 70px;
  border-radius: 30px;
}
.button2 {
  background-color:green;
  color: black;
  width: 100px;
  height :150px;
  
}
.button3 {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: orange;
  color: purple;
  font-size: 100;
}
.button3:hover {
  width: 250px;
  height: 250px;
  font-size: 80px;
}
.button3:active {
  width: 200px;
  height: 200px;
  font-size: 65;
}