Custom CSS button fade on hover

shearerviljoen

Hey Guys.

Looking to resolve an issue I have.
On my home page at www.shearerviljoen.com I have the page setup for 2 buttons which @Hikin' Mike helped me with (thanks again Mike, you really are a great help in everything that you do)

I've gone and added to my site a fade in/out effect on hover.
And all works well and loving everything, but on my homepage where the 2 buttons are, upon hover, the Text fades in/out, but the box surround the text, which fills in color on hover, doesn't have the fade effect. Is there something I'm doing wrong?

The CSS to the buttons are:

.container {
  display: flex;
  height: 90vh;
}

.section {
  width: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.retouch {background-color: #f7f7f7;}

.photography {background-color: #242528;}

.my-button a {
  padding: 15px 30px;
  border: 1px solid;
  text-transform: uppercase;
  font-size: 1.2rem;
}

.retouch .my-button a {
  border-color: #242528;
  color: #242528;
}

.photography .my-button a {
  border-color: #f7f7f7;
  color: #f7f7f7;
}

  .retouch .my-button a:hover {
  border-color: #d4a414;
  color: #f7f7f7;
  background-color: #d4a414;
}

.photography .my-button a:hover {
  border-color: #d4a414;
  color: #242528;
  background-color: #d4a414;
}
@media (max-width: 736px){

  .container {display: block;}
  .section {
    width: 100%;
    height: 50%;
  }


}

And the fade in/out CSS I have is this:

/* Transition the links so they fade in and out */
a { 
  -webkit-transition:color 0.75s ease-in;
  -moz-transition:color 0.75s ease-in;
  transition:color 0.7s ease-in;
}

/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui .sm-button,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.75s ease-in;
  -moz-transition: all 0.75s ease-in;
  transition: all 0.7 ease-in;
}

Thanks in advance guys.

Shearer

Hikin' Mike

Should use all here too...

a { 
  -webkit-transition: all 0.75s ease-in;
     -moz-transition: all 0.75s ease-in;
          transition: all 0.7s ease-in;
}

Hikin' Mike

...or you need background-color since your trying to change the color of the background and not the color of the text. I use all so the delay is for all of the hovers.

shearerviljoen

Awesome thanks @Hikin' Mike

That is all that was missing. Works perfectly now.