I have a .nav-link
When .active is added to it, it gets text-decoration: underline. How do i make this text decoration animate by sliding in from the left?
You can create and animate custom underline like this. As you cannot animate the text-decordation: underline;
.nav-link:after{
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .2s ease; // this will add animation from left to right.
-webkit-transition: width .2s ease;
}
.nav-link:active:after{
width: 100%;
left: 0;
background: #fff;
}
Related
The transition that I applied to the normal state is being applied to the arrow on the active state. Notice that when the button is clicked, it takes the arrow .3s to turn from white to the same color as the rest of the active state. How can I remove this transition from the arrow's active state while keeping the transition of the button background on hover?
I tried removing transition: all .3s from .btn but this removes the hover state background color delay as well. I want to keep this.
body {
background: #00b894;
}
.btn {
color: #fff;
padding: 0 60px;
height: 64px;
border: 3px solid #fff;
line-height: 58px;
background: none;
display: inline-block;
position: relative;
overflow: hidden;
outline: none;
transition: all .3s;
/* This is causing a transition on the arrow's active state */
}
.btn:hover {
background: #009E7E;
}
.btn:active {
border-color: #008066;
color: #008066;
}
.btn:before {
position: absolute;
transition: all 0.3s;
top: 50%;
transform: translateY(-50%);
}
.btn--continue:before {
left: 130%;
}
.btn--continue:hover:before {
left: 80%;
}
.icon-arrow-right:before {
content: "→";
}
<button class="btn btn--continue icon-arrow-right">Continue</button>
I want the white arrow to immediately turn into the same color as the rest of the active state. Basically, remove the .3s transition. However, I want to keep the hover button background delay.
Set your transition to: transition: background .3s;
I'm using a CSS transition on my hyperlink elements to make their interaction appear smoother. But I also want immediate feedback when the user is waiting for it. Hence I want the new state to appear immediately, but let it fade out when the user moves away.
Here's some CSS that I'm currently using:
a
{
display: inline-block;
padding: 20px;
background: #eeeeee;
color: black;
text-decoration: none;
transition: background 1s;
}
a:hover
{
background: #bbbbbb;
transition: background 0s;
}
a:active
{
background: #888888;
transition: background 0s;
}
Test link
As you can see the colour fade is in effect when leaving the element with the mouse cursor, but not when entering it.
When pressing a mouse button on the hovered link, the colour again changes immediately.
Now comes the interesting part: When the mouse button is released, I'd like the colour to fade back to the hover state. But I can't manage to do so because the :hover state doesn't know from which state direction it's coming and always disables the transition.
Whatever is changed, there must be no transition when first hovering the link.
Again in a simple state diagram:
State: normal <----------> hover <----------> active
Transition: yes no yes? no
(currently no)
Is this possible with CSS? I know I could add custom JavaScript but that would need to go to a great number of elements.
An idea is tu use pseudo-element to create your backgrounds and you can easily create the effect you want. The drawbacks is that you will have more CSS and you have to add your content inside a span in order to correctly set z-index values.
Using 2 pseudo-elements:
a {
display: inline-block;
padding: 20px;
background: #eeeeee;
color: black;
text-decoration: none;
transition: background 1s;
position: relative;
}
a span {
position: relative;
z-index: 3;
}
a:before,
a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
z-index: 1;
transition: background 1s;
}
a:after {
z-index: 2;
}
a:hover::before {
background: red;
transition: background 0s;
}
a:active::after {
background: blue;
transition: background 0s;
}
<span>Test link</span>
Using only one pseudo element:
a {
display: inline-block;
padding: 20px;
background: #eeeeee;
color: black;
text-decoration: none;
transition: background 1s;
position: relative;
}
a span {
position: relative;
z-index: 1;
}
a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
z-index: 0;
transition: background 1s;
}
a:hover {
background: red;
transition: background 0s;
}
a:active::before {
background: blue;
transition: background 0s;
}
<span>Test link</span>
Here's what I did based on Temani Afif's answer. It doesn't need the additional <span> inside the link but instead an additional data-text attribute on it, and it only works for plain text content (no images etc.).
The example has two test links, one with and one without the attribute, to show the fallback behaviour that's basically what I have in the question.
Not sure which is "better". It probably depends on the circumstances. I just wanted to add this solution as well.
a
{
display: inline-block;
padding: 20px;
background: #eeeeee;
color: black;
text-decoration: none;
transition: background 1s;
position: relative;
}
a:hover
{
background: red;
transition: background 0s;
}
a[data-text]::before
{
content: attr(data-text);
color: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: transparent;
transition: background 1s, color 1s;
}
a[data-text]:active::before,
a:not([data-text]):active
{
color: white;
background: blue;
transition: background 0s;
}
Test link
Test link
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}
this question is a follow on from my previous question.
I have some style used from this website, to create a slide in underline effect, please see example on this jsfiddle.
My previous question was asking how to adapt this so the line came in from right to left, and on top of the text, please see example on this jsfiddle.
My next step is to add both of these to one element, so one line slides in from left to right on the bottom, and the other right to left on top.
When I tried to add both of these together, it seems to only display the top one, please see this jsfiddle.
My question is how do I add both the top slide in line and the bottom slide in line to an element?
.cmn-t-underline {
position: relative;
color: #ff3296;
}
.cmn-t-underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-underline:hover {
color: #98004a;
}
.cmn-t-underline:hover:after {
width: 100%;
height:2px;
}
.cmn-t-overline {
position: relative;
color: #ff3296;
}
.cmn-t-overline:after {
display: block;
position: absolute;
right: 0;
top: -10px;
width: 0;
height: 10px;
background-color: #2E9AFE;
content: "";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
.cmn-t-overline:hover {
color: #98004a;
}
.cmn-t-overline:hover:after {
width: 100%;
height:2px;
}
<h1 class="cmn-t-underline cmn-t-overline">Test</h1>
You have to make use of :before for your top line, and :after for your bottom line.
The way you are doing it the second ":after" overrides the first so you end up with only one line.
I have edited your jsFiddle :
http://jsfiddle.net/7k4rLdno/
I only changed the second :after with :before and everything works well.
You can't have two :after or two :before the the exact same element.
use
:before - top line
:after - bottom line
h1{
position: relative;
color: #ff3296;
}
h1:before,
h1:after {
display: block;
position: absolute;
width: 0;
height: 10px;
background-color: #2E9AFE;
content:"";
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
height:2px;
}
h1:before {
left: 0;
top: -10px;
}
h1:after {
right: 0;
bottom: -10px;
}
h1:hover {
color: #98004a;
}
h1:hover:after,
h1:hover:before {
width: 100%;
height:2px;
}
<h1>Test</h1>
Fiddle
I'm trying to implement a menu nav bar that on hover highlights the menu item with an underline animation from LEFT to RIGHT.
Currently I have the underline animating from the center of the menu item to the outside.
I have tried searchng for a solution to this but can't figure out what I'm doing wrong.
Here is a link to the project on codepen http://codepen.io/anon/pen/JowgqP
HTML
<menu>
<p><strong>Home</strong>
<strong>About</strong>
<strong>Portfolio</strong>
<strong>Contact</strong> <strong>
<p class="note">This is a recreation of the link hover effect from factmag.com</small>
</menu>
CSS (SCSS)
#import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);
$link-color: #E71818;
$text-color: black;
$article-font: Noto serif, serif;
menu {
color: $text-color;
font-family: $article-font;
max-width: 30em;
}
p {
font-size: 18px;
line-height: 1.5;
}
menu a {
#extend %fancy-link;
}
.note {
display: inline-block;
border-top: 1px solid $link-color;
color: #777;
font-size: .8em;
font-style: italic;
margin-top: 2em;
padding-top: 1em;
}
%fancy-link {
color: $link-color;
position: relative;
text-decoration: none;
transition: all 0.15s ease-out;
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
&:hover {
transition: all 0.15s ease-out;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
}
The default transformation point is center center...or rather 50% 50% for ease of reference. (For 2 dimensions...we'll leave out z offsets for now.)
You would have to amend this so that the origin is now center left
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transform-origin: center left; /* here */
transition: all 0.3s ease-in-out 0s;
}
Codepen Demo
Transform-Origin # MDN