1 Dot -> 3 Dots

Button

Use text-shadow to generate other dots.

    /*HTML*/
    div.button{Button}
    /*CSS*/
    .button{
  display:inline-block;
  font-size:30px;
  border:1px solid maroon;
  padding:10px 20px;
  color:maroon;
  position:relative;
}
.button:before{
  position:absolute;
  top: 50%;
  left: 50%;
  color:transparent;
  content:"·";
  text-shadow:0 0 transparent;
  font-size: 1.2em;
  transition: text-shadow .3s,color .3s;
  transform:translateX(-50%);
}
.button:hover:before{
  color:maroon;
  text-shadow: 10px 0 maroon, -10px 0 maroon;
}