SCSS

by Lalji Tadhani

HTML

<div id="banner-message">
  <button>Hover to change color</button> <br/>
  <button>Hover to change color lorem ipsum lorem ipsum</button>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  box-sizing:border-box;
}

 button {
    background: $blue-darker;
    border: none;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
    position:relative;
    display:block;
    
    
    &:before{
      content: "";
      border:4px solid red;
      position:absolute;
      left:-2px;
      top: -2px;
      width: 100%;
      padding:5px;
      height: 100%;
      border-radius:30px;
    }
  }