Custom CSS button fade on hover

shearerviljoen · June 6, 2020

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 · June 6, 2020

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 · June 6, 2020

...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 · June 7, 2020

Awesome thanks @Hikin' Mike

That is all that was missing. Works perfectly now.

jack_sparrow · October 11, 2023

> @shearerviljoen said:
> 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

That made such a huge difference!! Now the hover is not harsh anymore. Very simple to do!!

Custom CSS button fade on hover

Comments