Have the following class
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
Am trying to add a transition/transform to either the font-size or color in order to make the hover effect less jerky. Have been unable to find anything that discusses those two elements in regards transition. Any help would be appreciated as this is a non-commercial project for big Sis's recipe site ... yeah the net needs another one of those but in her defense non-gluton recipes only.
Sorry forgot to mention the font-size is 12px and font-color is a sort of grey if not hovered over
I just added these lines and hope it helps you:
font-size: 12px; (To set the font size)
transition: .5s font-size, 1s color; (Means 0.5 seconds to changing the font-size and 1s to changing the color of the link)
color: grey; (To change the text color)
text-decoration: none; (To remove the underline of the link)
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
transition: .5s font-size, 1s color;
color: grey;
text-decoration: none;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
<div class="home-cards">
Test
</div>
You can choose which properties you want the transform to apply to.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
a {
font-size: 12px;
color: grey;
transition: font-size 0.5s ease, color 0.5s ease;
}
a:hover {
font-size: 16px;
color: red;
transition: font-size 0.5s ease, color 0.5s ease;
}
My Link
If you have a different element tag inside of your anchor tag for example:
<p style="display: inline; margin: 0;">test</p>
Try different css selector:
.home-card a:hover p{
font-size: 14px;
color: red;
}
You may want to remove extra margin from p tag...and make it display inline since p tag is a block-level element.
Related
I have written this styling for an <h2> heading. I've set a transition effect for when the heading is hovered over. But as the text skews, the page does a slight jump during the animation. How can I prevent that awkward jump without sacrificing the transition/animation effect?
Try this styling while having another element just before the h2 to see the jump on that element when the h2 is hovered:
.heading-secondary {
font-size: 3.5rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
background-image: linear-gradient(
to right,
$color-primary-light,
$color-primary-dark
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
transition: all 0.5s ease-in-out;
letter-spacing: 0.15rem;
&:hover {
letter-spacing: 0.2rem;
transform: skewX(2deg) skewX(180deg);
}
}
Maybe need to make the body overflow or something hidden. Let's see a working example
.heading-secondary {
font-size: 3.5rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
background-image: linear-gradient( to right, $color-primary-light, $color-primary-dark);
background-clip: text;
-webkit-background-clip: text;
transition: all 0.5s ease-in-out;
letter-spacing: 0.15rem;
}
.heading-secondary:hover {
letter-spacing: 0.2rem;
transform: skewX(2deg) skewX(180deg);
}
.container-overflow-hidden {
overflow: hidden
}
<h1 class="heading-primary">heading-primary</h1>
<div class="container-overflow-hidden">
<h2 class="heading-secondary">heading-secondary</h2>
</div>
I am sure others might have experienced the same problem, but not only am I new to CSS, English is also not my main language, and therefore I don't really know how to go about researching on how to solve this issue. I don't know what to call this situation. Basically, upon hover, the text slightly moves instead of staying where it belongs. I am assuming I am doing something wrong with paddings. But I know that it is possible to have this "button" effect, as in, the background color of the hover effect having that size, but I really can't figure out a solution... I have been hours and hours trying different methods but no success. I am also not sure if I am styling the links properly. Can someone help please?
Here's my navbar CSS code below:
.nav-items {
display: flex;
transform: translateX(0px);
margin-right: 5%;
}
.nav-items li {
list-style: none;
padding: 25px;
}
.nav-items a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 14px;
}
.nav-items li a:hover {
background-color:#006aff;
padding: 20px;
transition: 0.2s ease-in-out;
}
As I can see you are adding the padding in the hover state.
Your code should be like this the way you have described you want to show the navigation items.
.nav-items a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 14px;
padding: 20px;
transition: 0.2s ease-in-out;
}
.nav-items li a:hover {
background-color: #006aff;
}
Below is a CSS code snippet to transit a button from #33ae74 to #1ce when hover it.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
}
.button:hover {
background-color: #1ce;
transition: background-color 2s ease-out;
}
It works well. My question is: before mouse hover,there is no transition bind to the button,why transition works when hover it? In another case, when hover, transition bind to the button, meanwhile the background color also be changed to #1ce immediately,so there should no color be transited. but why we could still see the transition?
that's very simple just make the transition on the original element. By doing that the transition will work when you hover and will work when the over is done.
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 2s ease-out;
}
.button:hover {
background-color: #1ce;
}
<button class="button">hover over me</button>
I would like to look every button to look by default like btn-outline-secondary
See Bootstrap5 Outline Buttons
Example:
<form>
<button>foo</button>
</form>
this button should get the styling like btn-outline-secondary.
How can I achieve that?
BUT: I can't modify the HTML snippet, since it gets generated by a library. I would like to use JS/CSS to achieve the goal.
Background: I am using BS5 and don't need to support dated browsers like IE11.
How about this?
(function applyDefaultClassesToButtons() {
var buttons = document.getElementsByTagName("button");
for (i = 0; i<buttons.length; i++) {
buttons[i].classList.add("btn");
buttons[i].classList.add('btn-outline-secondary');
}
})();
Here is a JSFiddle example
simply apply the style that you take from bootstrap:
button {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #6c757d;
border-color: #6c757d;
}
button:hover,
button:active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
button:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgb(108 117 125 / 50%);
}
<form>
<button>foo</button>
</form>
If you have some CSS preprocessors like LESS or SASS, you could do something like this:
button {
.btn;
.btn-outline-secondary;
}
If not, I think JS is the only right way as #momh answered.
Basically you could simply use your CSS with the colors you desire. In this case i think you like the colors of that BS5 button.
button {
font-family: Ubuntu, sans-serif;
display: inline-flex;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
justify-content: center;
align-items: center;
align-content: center;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #6c757d;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s cubic-bezier(.23,.97,.83,.67), background-color .15s cubic-bezier(.23,.97,.83,.67), box-shadow .15s cubic-bezier(.23,.97,.83,.67);
color: #6c757d;
}
button:hover,
button:active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
button:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgb(108 117 125 / 50%);
}
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<form>
<button>SAVE</button>
<button>NEXT</button>
<button>Secondary</button>
</form>
If you can use CSS preprocessors (I can't write comments as of now), then I would suggest using one, I know that SASS and LESS have a way of extending selectors. This way you could apply your rule to the the button selector.
It is a way better solution than simply copying the rules since the library can change and you probably dont want to check every update whether you should change your selector or not.
And if you want to change only the button in the form, then you might either write a more complex selector, or a better solution would be adding a wrapper around the snippet you can't change.
If CSS preprocessors are out of question, then my answer would be checking out the answer of #Momh
I need to animate both of the element and its pseudo element.
Then I noticed, when I hover, everything is fine. But then I stop hovering, the Home animates first and after that, the pseudo element Link starts animating.
Why it behaves like this? Is there a way to make them animate simultaneously?
Here's a simplified recreation of my problem:
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a:hover {
color: red;
font-size: 48px;
}
a:hover::before {
color: green;
font-size: 32px;
}
a::before {
content: 'Link:';
transition: all 1s;
}
Home
I'm using MacOS with Chrome Version 83.0.4103.97 (Official Build) (64-bit)
If you can't reproduce the problem, here's a screengrab of it:
I also assigned the default values to ::before and works fine. I think it trying to inherit the default values and it's confusing.
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a:hover {
color: red;
font-size: 48px;
}
a::before {
content: 'Link:';
transition: all 1s;
font-size: 1rem;
color: blue;
}
a:hover::before {
color: green;
font-size: 32px;
}
Home
Because there is no default font-size for the pseudo element so the pseudo element will inherit the font-size of the a. Here is what is happening:
we initially have both element at font-size X (X is based on your other properties, 16px here)
On hover the pseudo element will have 32px and a will have 48px
when you unhover (and here is the trick) the pseudo element will inherit for a moment the font-size of the a (48px) so your transition will be from 32px to 48px - y where y is changing du to the transition applied to a until the 48px - y is back to X
Same logic apply with coloration because it's also inherited. Simply set a default font-size and color
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a:hover {
color: red;
font-size: 48px;
}
a:hover::before {
color: green;
font-size: 32px;
}
a::before {
content: 'Link:';
transition: all 1s;
font-size:16px;
color:blue;
}
Home
I found a solution on mouseover it's a bit ugly but at least it's working smoothly
a {
color: blue;
transition: all 1s;
text-decoration: none;
}
a::before {
content: 'Link:';
/* transition: all 1s; */
}
a:hover {
color: red;
font-size: 48px;
}
a:hover::before {
transition: all 1s;
color: green;
font-size: 32px;
}
Home