share fun codes you think that everyone should have/use - ✁ ∙ Web Crafting

as someone who always looks for ways to improve my site, I frequent w3schools looking for fun ways to spice up my site.
If you have fun or cool codes that is your go-to when designing, drop them below! I'll go first. This is a cool appearing image when you click on the button!

HTML

Code

<div class="container">
<a href="#" class="button">
  click for an image
</a>

<img class="content" src="URL" />
</div>

CSS

Code

body {
  background: url(https://iili.io/HkwFAx9.jpg)
}

/* This part makes the click effect work */

/*This changes the part you click on*/
.button:focus {
  box-shadow: 0px 2px #FFFFFF;
  background-color: #006400;
  font-weight: bold;
}

/*This allows you to change the content when you click on the button*/
.button:focus ~ .content {
  opacity: 1;
}

/*Just some styling to make the look pretty :D*/

.container {
  width: 500px;
}

.button {
  font-family: font;
  color: #HEX;
  background: #;
  border-radius: px;
  padding: -px -px;
  font-size: -px;
}

.content {
  opacity: -;
  margin-top: -px;
  transition: -s;
  width: -px;
  border: -px solid white;
}

*{cursor: default}

.button:hover {
  cursor: pointer;
}

~~no this is not a way for me to grab some cool codes what...~~