This question already has answers here:
CSS transition not working with underline
(10 answers)
Closed 5 months ago.
I would like the text to underline when I hover over it, with a slight transition to make it look nice, but it underlines directly and the transition doesn't occur, what's my mistake?
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: var(--branco-principal);
}
.habilidades__titulo:hover {
text-decoration: underline;
transition: 2s all;
}
<a href="#" class="habilidades__titulo">
title
</a>
Use border instead and apply the transition on the border color.
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: red;
transition: 2s border;
border-bottom: 0.1em solid transparent;
}
.habilidades__titulo:hover {
border-color: currentColor;
}
<a href="#" class="habilidades__titulo">
title
</a>
Set your text-decoration color to 'transparent'. Then on hover you can set the color to whatever you want. Transition should target text-decoration-color.
.habilidades__titulo {
text-decoration: underline;
text-decoration-color: transparent;
text-align: center;
font-size: 48px;
color: var(--branco-principal);
display: inline-block;
transition: .4s text-decoration-color ease;
}
.habilidades__titulo:hover {
text-decoration-color: darkorchid;
}
<div class="habilidades__titulo">test</div>
This is very hacky. You might want to wrap it inside a div with fixed width.
.habilidades__titulo {
text-decoration: none;
text-align: center;
font-size: 48px;
color: red;
display:inline-block;
width:0px;
border-bottom: 0.1em solid red;
transition: all .2s ease;
}
.habilidades__titulo:hover {
width:90px;
}
<a href="#" class="habilidades__titulo">
title
</a>
Issue
This problem is caused by CSS transition. Transition doesn't work for values that cannot be represented numerically: auto, display: none/block/flex, etc.
text-decoration: none <-> underline is NOT numerical. That is why your code doesn't work.
More examples:
❌height: 0 <-> height: auto
❌display: none <-> display: flex
✅height: 0 <-> height: 100vh
✅color: blue <-> color: red (Colors CAN be represented numerically)
Solution
Change text-decoration-color instead of text-decoration-line(= text-decoration in your code)
.habilidades__titulo {
text-decoration-color: transparent; /* rgba(0, 0, 0, 0) */
text-align: center;
font-size: 48px;
color: var(--branco-principal);
transition: 2s all; /* Moved */
}
.habilidades__titulo:hover {
text-decoration-color: inherit; /* The same color as font-color */
/* transition: 2s all; */
}
<a href="#" class="habilidades__titulo">
title
</a>
Related
i have a button with the following structure:
<button className='ctaBtn'>
<a href={props.url}>Open</a>
</button>
And this is its styles:
.ctaBtn{
border-radius: 5px;
width: 70px;
height: 40px;
padding: 10px;
border: .5px solid rebeccapurple;
background-color: white;
color: rebeccapurple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
}
.ctaBtn:hover{
background-color: rebeccapurple;
}
.ctaBtn a:hover{
text-decoration: none;
color: white;
}
.ctaBtn a{
list-style-type: none;
text-decoration: none;
color: rebeccapurple;
}
As i hover over the button the background color changes to purple and as i hover over the a tag the font color changes to white. The issue is that before i get with the cursor to the a tag the button background is purple and the text is also purple. What i want to achieve is that as soon is pass through the button both css properties are activated the background color purple for the button and the white color for the text. How can i achieve this?
We combine some of your properties and hit the nested anchor tag from the parent action. See example below, but see additional info below.
.ctaBtn{
border-radius: 5px;
width: 70px;
height: 40px;
padding: 10px;
border: 1px solid purple;
background-color: white;
color: purple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
transition: background-color .25s ease, color .25s ease;
}
.ctaBtn:hover{
background-color: purple;
}
.ctaBtn:hover a {
color: white;
}
.ctaBtn a {
text-decoration: none;
}
<button class='ctaBtn'>
Open
</button>
On a side note though, you shouldn't nest an anchor tag inside a button as they're mutually exclusive in use. I'd prefer to see something like this instead for WCAG and semantic purposes.
.ctaBtn{
border-radius: 5px;
height: 40px;
padding: 10px;
border: 1px solid purple;
background-color: white;
color: purple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
transition: background-color .25s ease, color .25s ease;
}
.ctaBtn:hover{
background-color: purple;
color: white;
}
<button class='ctaBtn'>
WORDS
</button>
Or swap button for <a> tag instead but neither as a child of one another.
It's because you set a padding on the button so the a tag is smaller than its parent -> your problem.
Another thing: Don't use an a tag in a button tag, it's accessibility complete nonsense. You only need an a tag and a span.
<a href="#" class="ctaBtn">
<span>Open</span>
</a>
I need to set css of button like this website, where you can see the Read more button with Dark color and half shadow
Please see the following image:
I tried below code, but I failed:
.rmbutton {
color: #ffffff !important;
background: #504d62 !important;
position: relative;
overflow: hidden;
padding: 13px 35px;
text-transform: uppercase;
display: inline-block;
font-size: 14px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
text-align: center;
font-weight: bold;
}
Thanks in advance!
Simple background, You should fiddle with the values to your liking.
button {
color: white;
padding: 40px 80px;
background: linear-gradient(100deg, red 25%, blue 26%);
}
<button>Don't click me</button>
I'm making a simple button with a CSS underline ease transition. All other ease transitions are working fine (hover, ease in, un-hover, ease out), but border-bottom will not ease out. When you quit hovering, it simply reverts back to normal without easing out.
Here is a code-pen with a quick button I made to illustrate the problem.
https://codepen.io/anon/pen/jwgpdv
Here is my CSS:
.gbtn {
background: #bba989;
text-align: center;
line-height: 150px;
height: 150px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
display: inline-block;
transition: all .25s ease;
box-sizing: border-box;
font-family: "montserrat", serif;
padding: 0px 30px;
}
.gbtn:hover {
background-color: #aa9470;
border-bottom: 150px solid #242424;
}
You didn't define a border before hover, how is the browser supposed to know how to transition out?
Add this:
.gbtn {
border-bottom: 0 solid #242424;
}
I have some text, and beneath it a button. No matter what I change the top margin to, the button still sticks to the bottom of the text.
I am trying to leave a small gap between the text and the button.
Here is a Jsfiddle: http://jsfiddle.net/24bk2t78/
#import url(http://fonts.googleapis.com/css?family=Nunito:300);
.homethree a { text-decoration: none; }
sup { font-size: 36px; font-weight: 100; line-height: 55px; }
.button
{
margin-top:30%!important;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
color: #0C5;
font-size: 24px;
font-family: "Nunito", sans-serif;
font-weight: 300;
position:relative;
padding: 20px 0;
width: 220px;
height:30px;
background: #0D6;
border: 1px solid #0D6;
color: #FFF;
overflow: hidden;
transition: all 0.5s;
}
.button:hover, .button:active
{
text-decoration: none;
color: #0C5;
border-color: #0C5;
background: #FFF;
}
.button span
{
padding-right: 0;
transition: padding-right 0.5s;
}
.button span:after
{
content: ' ';
right: -18px;
opacity: 0;
width: 10px;
height: 10px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
.button:hover span, .button:active span
{
padding-right: 30px;
}
.button:hover span:after, .button:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: #0C5;
right: 0;
top: 50%;
}
<div class="row text-center homethree">
<div class="col-md-4">
<h4 class="service-heading">A Range of Classes</h4>
<p class="text-muted">WE TEACH CHILDRENS CLASSES, FAMILY GROUPS & ADULTS.</p>
<span>page 1</span>
</div>
<div class="col-md-4">
<h4 class="service-heading">Passionate Instructors</h4>
<p class="text-muted">ALL OUR CLASSES ARE TAUGHT BY PASSIONATE, MOTIVATIONAL & INSPIRING INSTRUCTORS.</p>
<span>page 2</span>
</div>
<div class="col-md-4">
<h4 class="service-heading">Friendly Team</h4>
<p class="text-muted">NEW MEMBERS ARE ALWAYS WELCOME. TWO FREE LESSONS FOR ALL.</p>
<span>page 3</span>
</div>
</div>
The problem is that <a> tags are inline elements. Changing them to an inline-block or block style element will make your margins properly apply.
.button {
display: inline-block;
}
More info: The Difference Between “Block” and “Inline”
On a sidenote, why not use <button> tags instead of <a>? They would be more appropriate.
try this demo
Fiddle
.button{
float:left;
margin-top:0;
}
.col-md-4
{
float:left;
width:100%
}
In this Fiddle (html+css) you can see that if you mouseover the "link" both, font and background, slowly rea-animates but if you mouseout ONLY the font re-animates again. The background just fast blink back to
a {background:}
How do I force the background to animate even on mouseout?
You had your transition for the background only on the hover. That means that if the user isn't hovering the transition isn't executed. By giving #dolu a transition: 5s instead of transition: color 5s it is fixed.
updated fiddle
Full CSS:
body {background: red; }
#dolu {
position: absolute;
bottom: 5px; text-align:
center; width: 100%;
}
#dolu a:hover {
color: white;
background: rgb(31, 31, 31);
}
#dolu a {
color: black;
background: white;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
font-variant: normal;
text-decoration: none;
padding: 10 20 6 20;
transition: 5s;
}