Custom CSS button fade on hover

shearerviljoenshearerviljoen Registered Users Posts: 37 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    ...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.

  • shearerviljoenshearerviljoen Registered Users Posts: 37 Big grins

    Awesome thanks @Hikin' Mike

    That is all that was missing. Works perfectly now.

  • jack_sparrowjack_sparrow Registered Users Posts: 2 Beginner grinner
    > @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!!
Sign In or Register to comment.