Preview

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&display=swap');

.bt-primary {
  padding: 20px 80px;
  font-size: 18px;
  font-family: 'Fira Sans', sans-serif;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  background-color: #108AF9;
  box-shadow: 0px 0px 20px 0px rgba(16,138,249,0.5);
  transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out;

  &:hover {
    background-color: #006FD4;
    box-shadow: 0px 0px 20px 0px rgba(0,111,212,0.5);
  }
  
  &:focus {
    background-color: #0060B7;
    box-shadow: 0px 0px 20px 0px rgba(0,96,183,0.5);
  }
  
  &:active {
    background-color: #0060B7;
    box-shadow: 0px 0px 20px 0px rgba(0,96,183,0.5);
  }
}