Hanging color transition
I have a link that changes color when the mouse hovers over it and I totally agree with the encoding for this, but I would like the effect to slide down as it just doesn't change color. how is this possible with css. I looked at Stack Overflow but could only find instances where people use background images and change their position. Is this the only way to make this possible?
It's hard to judge what I am trying to achieve, but it shows up on this weblounge website. The effect I'm trying to achieve is in two links on the homepage.
#contactlink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
margin-left: 78px;
margin-top: 40px;
float: left;
color: #FFF;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
text-decoration: none;
opacity: 0;
}
#contactlink:hover {
background-color: #FFF;
color: #666;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
}
<a href="#contact" class="smoothScroll" id="contactlink">Let talk</a>
source to share
The website you linked makes them using a pseudo element :before
that translates its scale over the top of the button. It also required an span
inside of the button so that it z-index
could be positioned on top of the element :before
. Here's an example:
a.color-change {
display: inline-block;
padding: 15px;
color: black;
background-color: white;
position: relative;
padding: 15px;
border: 1px solid black;
text-decoration: none;
z-index: 0;
}
a.color-change:before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #777;
transform: scale(1, 0);
transition: all .25s ease-out;
transform-origin: center top;
z-index: 0;
}
a.color-change:hover:before {
transform: scale(1);
}
a.color-change span {
z-index: 1;
position: relative;
}
<a href="#" class="color-change"><span>Hover Over Me</span></a>
source to share
Not sure why you are using white on white, anyway based on my understanding I am providing you with something.
#contactlink {
background: #1568b6;
color: #fff;
display: inline-block;
line-height: normal;
padding: 17px 20px 16px 20px;
position: relative;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background .15s;
-moz-transition: background .15s;
-ms-transition: background .15s;
-o-transition: background .15s;
transition: background .15s
}
#contactlink span {
position: relative;
z-index: 1;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s
}
#contactlink:before {
background: #6c6c6c;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 0;
display: block;
padding: 0;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out
}
#contactlink:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<a href="#contact" class="smoothScroll" id="contactlink">
<span>Let talk</span>
</a>
source to share