JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">BUTTON</a>
<div class="div1">DIV 1</div>
<div>DIV 2</div>
<div class="div1">DIV 3</div>
<div>DIV 4</div>

CSS

body {
  margin: 0;
  background: red;
}

a {
  display: block;
  width:150px;
  padding:15px;
  color: #fff;
  text-decoration: none;
  text-align:center;
  transition:1s all ease;
  border-top:2px solid transparent;
  border-bottom:2px solid transparent;
}
a:hover {
  letter-spacing: 3px;
  border-top-color: #fff;
  border-bottom-color: #fff;
}
div {
  color: #fff;
}
.div1 {
  transition:1s all ease;
}
a:hover ~ .div1 {
  color: hotpink
}
a:hover + .div1 {
  color: blue;
}