Customizing border outline of button

Site URL: http://moodart.co

Hi there, 

I am trying to add a new CSS code to my custom CSS and it is not working... 

my objective is to create a different colour outline for my button but still have the button be filled with a colour...

This is what my Custom CSS looks like right now... 

.Index-page:first-child .sqs-layout, .Intro .sqs-row {
  -webkit-animation: fade-text-anim 2s ease;
  animation: fade-text-anim 2s ease;
}

@keyframes fade-text-anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
.sps-block-button .sps-block-button-element—medium {
  background-color: pink;
  border-radius: 50px;
  border: 2px solid black;
  width:75%;
}
.sps-block-button .sps-block-button-element—small:hover {
  border: 2px solid black;
  background-color: white;
  color: black;
}

This is what I added but does not work... 

.sps-block-button .sps-block-button-element—background-colorborder-radius50pxborder2pxsolidblackwidth75%.sps-block-button.sps-block-button-elementhoverborder2pxsolidblackbackground-colorwhitecolorblack

Any help would be much appreicated 🙂