<div class="flex-split">
  <div>
    <h1>Semplice effetto con le CSS Transition</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
</div>
.flex-split {
	display:flex;
  flex-direction:row;
  justify-content: center;
  height: 100vh;
}

.btn{
  backgorund-color: #fff;
  border: 1px solid #333;
  border-radius: 6px;
  color: #333;
  display: block;
  font-family: sans-serif;
  margin: 10px auto;
  max-width: 100px;
  padding: 10px;
  text-align: center;
  text-decoration: none;

  transition: all .6s;
}

.btn:hover{
  background-color: #333;
  color: #fff;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.