CSS Apply a border-bottom with a css transition on link-hover

The following tutorial shows you how to use CSS to do «CSS Apply a border-bottom with a css transition on link-hover».

CSS Style

The CSS style to do «CSS Apply a border-bottom with a css transition on link-hover» is

article p !-- ww w .d e m o 2 s . c om --> margin-bottom:1.1em; font-size:16px; > article a:link, article a:visited < text-decoration:none; color:#9EB63C; font-weight:300; text-transform:uppercase; font-size:14px; font-weight:400; -webkit-transition:border-bottom .5s; -moz-transition:border-bottom .5s; -ms-transition:border-bottom .5s; -o-transition:border-bottom .5s; transition:border-bottom .5s; > article a:hover < text-decoration:none; color:#9EB63C; font-weight:300; text-transform:uppercase; font-size:14px; font-weight:400; border-bottom:1px dotted #10425E; -webkit-transition:border-bottom .5s; -moz-transition:border-bottom .5s; -ms-transition:border-bottom .5s; -o-transition:border-bottom .5s; transition:border-bottom .5s; >

HTML Body

body> article >"atelier-beaute wow fadeInRight"> h1>L'ate h2>Un moment, un instant, rien que pour soi. br> p>Venezn. p>ns de qualit? ? la hauteur de vos envies et de vos esp?rances. p>L'accueil, l'aet con?u pour votre bien-?tre et satisfaction. p>Pour une meilleure organisation, les soins sont uniquement effectu?es sur rendez-vous. p>D?couvrez nos a href="carte-des-soins.htm title ">soins visage , a href="carte-des-soins.htm" title="Manucures">manucures et a href="carte-des-soins.htm" title="Soins des mains">soins des mains , a href="carte-des-soins.htm" title="2pilation ? la cire">?pilation ? la cire , a href="carte-des-soins.htm" title="Soins des pieds">soins des pieds , a href="carte-des-soins.htm" title="P?dicure m?dicale">p?dicure m?dicale et a href="carte-des-soins.htm" title="Massages">massages en consultant notre carte des soins.   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> article p < margin-bottom: 1.1em; font-size: 16px; > article a:link, article a:visited < text-decoration: none;!-- w w w . d e m o 2 s . c o m--> color: #9EB63C; font-weight: 300; text-transform: uppercase; font-size: 14px; font-weight: 400; -webkit-transition:border-bottom .5s; -moz-transition:border-bottom .5s; -ms-transition:border-bottom .5s; -o-transition:border-bottom .5s; transition:border-bottom .5s; > article a:hover < text-decoration: none; color: #9EB63C; font-weight: 300; text-transform: uppercase; font-size: 14px; font-weight: 400; border-bottom: 1px dotted #10425E; -webkit-transition:border-bottom .5s; -moz-transition:border-bottom .5s; -ms-transition:border-bottom .5s; -o-transition:border-bottom .5s; transition:border-bottom .5s; >  body> article >"atelier-beaute wow fadeInRight"> h1>L'ate h2>Un moment, un instant, rien que pour soi. br> p>Venezn. p>ns de qualit? ? la hauteur de vos envies et de vos esp?rances. p>L'accueil, l'aet con?u pour votre bien-?tre et satisfaction. p>Pour une meilleure organisation, les soins sont uniquement effectu?es sur rendez-vous. p>D?couvrez nos a href="carte-des-soins.htm title ">soins visage , a href="carte-des-soins.htm" title="Manucures">manucures et a href="carte-des-soins.htm" title="Soins des mains">soins des mains , a href="carte-des-soins.htm" title="2pilation ? la cire">?pilation ? la cire , a href="carte-des-soins.htm" title="Soins des pieds">soins des pieds , a href="carte-des-soins.htm" title="P?dicure m?dicale">p?dicure m?dicale et a href="carte-des-soins.htm" title="Massages">massages en consultant notre carte des soins.    

Related

• CSS Activating div while hovering over underlaying div — CSS transition (Demo 2)
• CSS Activating div while hovering over underlaying div — CSS transition (Demo 3)
• CSS Activating more the one transition on mouse hover
• CSS Apply a border-bottom with a css transition on link-hover
• CSS Apply transitions on :hover not :active
• CSS Applying a transition to a span with in a div on hover
• CSS Better to add CSS timed transition to link selector (a) or to the hover state (a:hover)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Hover effect : expand bottom border

To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state.

Here is an example of what the border hover effect can look like :

The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.
To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:

h1 < color: #666;display:inline-block; margin:0;text-transform:uppercase; >h1:after < display:block; content: ''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; >h1:hover:after < transform: scaleX(1); >h1.fromRight:after < transform-origin:100% 50%; >h1.fromLeft:after

Expand from center
 
Expand from right
 
Expand from left

Note : You need to add vendor prefixes to maximize browser support (see canIuse).

Expand bottom border on hover with 2 lines

You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with bottom:1.2em; :

h1 < position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; >h1:after, h1:before < display:block; content: ''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; >h1:before < position:absolute; bottom:1.2em; left:0; width:100%; >.ef2:hover:after < transition-delay:150ms; >h1:hover:after, h1:hover:before

Expand border
on two lines
 
 
Expand border
effect two

Different transition direction on hover in and out :

The point is to change the transform-origin position from one side to the other on the hover state. This way the bottom boder enters from one side on hover and exits on the other when the element isn’t hovered anymore.
Here is a demo :

h1 < color: #666;display:inline-block; margin:0;text-transform:uppercase; >h1:after < display:block; content: ''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; >h1.fromLeft:after < transform-origin: 100% 50%; >h1.fromRight:after < transform-origin: 0% 50%; >h1.fromLeft:hover:after < transform: scaleX(1); transform-origin: 0% 50%; >h1.fromRight:hover:after

Expand from right
 
Expand from left

Источник

Add animation to border bottom on input

I want the color of the border-bottom of my input to change with an animation when clicked. Similar to the yellow line one this. I want this to be on all the input boxes and the select.

.input_container < display: inline-block; text-align: center; >.awsome_input < padding: 5px 10px; border: none; background: transparent; display: block; >.awsome_input_border < display:inline-block; width:0px; height: 2px; background: #FEC938; position: relative; top:-5px; -webkit-transition: all ease-in-out .15s; -o-transition: all ease-in-out .15s; transition: all ease-in-out .15s; >.awsome_input:hover, .awsome_input:active, .awsome_input:focus < outline: none; >.awsome_input:hover+.awsome_input_border, .awsome_input:active+.awsome_input_border, .awsome_input:focus+.awsome_input_border

I’ve tried to recreate this in my code but I cant seem to get it right. Any idea how to do this? I understand that the span is what creates the yellow line on the snippet but can I recreate this instead to change the border-color instead of adding another line. My code.

     
 
     Sweden United Kingdom United States Canada  
 
   .signup-form < background-color: #efefef; width: 50%; >.signup-form form < padding: 20px 10px >.signup-form input[type=text], select < border: none; border-bottom: 2px solid darkgrey; background-color: inherit; margin-right: 20px; >.signup-form input[type=text]:focus, select:focus

Источник

CSS: bottom-border-transition — expand from middle

I want to add a bit of transitions to my website. I already have that when someone is in a input-field (so :focus) the border changes color with a transition. I would like that transition to happen from the center to left and right. So the animation is an expanding border to both sides. Is that possible with CSS? If I have to use Jquery or Javascript it’s fine. Thanks in advance, Ian

1 Answer 1

You can do the border transition with CSS. Hope this helps. CODEPEN example

body < padding: 50px; >a, a:hover < color: #000; text-decoration: none; >li < display: inline-block; position: relative; padding-bottom: 3px; margin-right: 10px; >li:last-child < margin-right: 0; >li:after < content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; >li:hover:after

Hi, thanks, how can I override this for a single li element to disable this effect. Say what style should I include to remove that effect from just CONTACT US , please?

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to Animate the Bottom Border on Hover using CSS?

To animate the bottom border of an element on hover, we can use the ::after pseudo-element selector in combination with the transition property.

The ::after pseudo-element selector is used to add additional content after the original content of an element. In our example, we will use it to add a border at the bottom of the element.

Now, we want to animate the bottom border of the element whenever we hover over it. To achieve this we will use the transition property.

To get the preview, hover over the below links:

Let’s say we have the following links in our HTML file with a class animated :

Now, we want to animate the bottom border of these links whenever we hover over them.

To achieve that we have to add the following CSS code:

Example:

.animated < text-decoration: none; display: inline-block; >.animated::after < content: ''; display: block; width: 0; /* Hide border initially */ height: 2px; background: red; transition: width 0.3s ease; >.animated:hover::after< width: 100%; /* Show border on hover */ >

Method 2 – Using transform Property

You can also use the transform property to animate the bottom border of an element.

In this approach, we scale the bottom border from 0 to 100% whenever we hover over the element using the scaleX() function of the transform property.

The main advantage of this method is that you can specify the direction of animation using the transform-origin property. That is, if you set the transform-origin to left , the border will animate from left to right.

Similarly, if you set the transform-origin to right , the border will animate from right to left.

Let’s first animate the bottom border from left to right just like we did it in the above example:

Example:

.animated < text-decoration: none; display: inline-block; >.animated::after < content: ''; display: block; transform: scaleX(0); border-bottom: 2px solid red; background: red; transition: transform 0.3s ease; transform-origin: left; /* Animate from left to right */ >.animated:hover::after

If you want to animate the bottom border from right to left, you have to just set the transform-origin to right .

Hover over the below links to get a preview:

Here is the CSS code you need:

Example:

.animated < text-decoration: none; display: inline-block; >.animated::after < content: ''; display: block; transform: scaleX(0); border-bottom: 2px solid red; background: red; transition: transform 0.3s ease; transform-origin: right; /* Animate from right to left */ >.animated:hover::after

You can also start animating the border from the center by just setting the transform-origin property to center.

Related posts:

Источник