I have a button which has some text and a font awesome icon that rotates 90 degrees in 0.5s and changes color when hovered. What I'm trying to accomplish is when the user unhovers the button it should take 0.5s to rotate from 90 degrees back to 0 degrees instead of immediately. I would like a smooth transition back to the original state instead of instant on unhover.
Codepen
Click Me <i class='fas fa-arrow-right' ></i>
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in;
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
transition: transform 0.5s ease 0s;
}
}
you didn't specify the target i:
try this
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in-out;
& i{
transition: all 0.5s ease-in-out;
}
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
}
}
Related
I'm working to build a button styling where when the user hovers over a button, the button moves up 2 pixels. I have that working with the following on hover:
`transform: translateY(-2px);`
The problem is, if you move your mouse right under the button, the button starts to move but and the button now bounces/jumps from normal to active causing button jumpies.
Any idea on how I can implement the button moving up 2 pixels on hover but without the jumpies when the mouse is near the edge of the button?
.ui.button {
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Similarly to Temani Afif's anwser, I would use a pseudo-element that's 2px longer than the element, but switching the overflow from hidden to visible on hover.
.ui.button {
position:relative; overflow:hidden;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.primary.button::after{
content:"";
position:absolute;
top:0; left:0;
width:100%;
height:calc(100% + 3.5px); /* translate + bottom border height*/
}
.ui.primary.button:hover {
overflow:visible;
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
An idea is to use a pseudo-element that will cover the space under button after the translation and you will avoid this effect. So it's like you simply increase the total height of your element instead of translating it.
.ui.button {
position:relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6,164,105,.25);
transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.button:after {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
}
.ui.primary.button:hover {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6,164,105,.25);
}
.ui.primary.button:hover:after {
content:"";
height:2px;
bottom:-3.5px; /* Don't forget the border !*/
}
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
Another idea is to use a container for the button on where you apply the hover. This will work with any value of transalation and you avoid doing calculation to find the values of the pseudo-element:
.ui.button {
position: relative;
outline: none;
height: 48px;
font-weight: 500;
font-size: 17px;
line-height: 20px;
padding-top: 12.5px;
padding-bottom: 12.5px;
color: #fff;
background: green;
border: 1.5px solid darkGreen;
box-shadow: 0 2px rgba(6, 164, 105, .25);
transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, -webkit-transform .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
}
.contain {
display: inline-block;
}
.contain:hover .ui.primary.button {
transform: translateY(-2px);
background: green;
border-color: darkGreen;
box-shadow: 0 4px rgba(6, 164, 105, .25);
}
<div class="contain">
<button class="ui medium primary button button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
</div>
I have a product listing little square thing, when I click it ( it's a label ) it should tick the box and it does but it should make the border green and hold it but it doesn't I have this:
.product {
width: 100%;
background: #fff;
border: 4px solid #fff;
border-radius: 4px;
margin-bottom: 20px;
box-shadow: 0 2px 3px #ddd;
text-align:center;
padding-bottom: 15px;
cursor: pointer;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
a {
color: #d6d6d6;
line-height: 25px;
border-radius: 100%;
background: #f2f2f2;
width: 25px;
height: 25px;
display: block;
position: absolute;
margin: 10px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
&:hover {
background: #e2e1e1;
color: #333;
text-decoration: none
}
}
img {
width: 80%;
margin: 15px auto;
pointer-events: none;
}
span {
display: block;
&.brand {
color: #cdcfd2;
font-size: 13px;
font-weight: 300;
}
&.name {
color: #232f3e;
font-size: 16px;
font-weight: 600;
}
}
&:hover {
border: 4px solid #d9dce1;
box-shadow: none;
}
}
and this works great it's .less my html looks like this:
<div class="col-md-2">
<label for="product_id" name="product_id" class="product">
i
<div class="position">
<input type="checkbox" class="checkbox" name="product_id" id="product_id">
</div>
<img src="assets/images/products/image.jpg">
<span class="brand">Brand</span>
<span class="name">Product</span>
</label>
How do I would I apply the suggestions in this checked: example?
input[type=checkbox]:checked + label { }
It looks pretty simple but when I add it it doesn't work all I want is the .product border to be green instead of grey when it's selected
I know I can use js but I don't want to css should do it.
+ is an adjacent sibling selector, meaning it matches the element after it based on the selector. Simply add a label tag after your <input type="checkbox"> tag.
.product {
width: 100%;
background: #fff;
border: 4px solid #fff;
border-radius: 4px;
margin-bottom: 20px;
box-shadow: 0 2px 3px #ddd;
text-align: center;
padding-bottom: 15px;
cursor: pointer;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.product a {
color: #d6d6d6;
line-height: 25px;
border-radius: 100%;
background: #f2f2f2;
width: 25px;
height: 25px;
display: block;
position: absolute;
margin: 10px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.product a:hover {
background: #e2e1e1;
color: #333;
text-decoration: none;
}
.product img {
width: 80%;
margin: 15px auto;
pointer-events: none;
}
.product span {
display: block;
}
.product span.brand {
color: #cdcfd2;
font-size: 13px;
font-weight: 300;
}
.product span.name {
color: #232f3e;
font-size: 16px;
font-weight: 600;
}
.product:hover {
border: 4px solid #d9dce1;
box-shadow: none;
}
input[type=checkbox]:checked + label {
color: red;
}
<div class="col-md-2">
<label for="product_id" name="product_id" class="product">
i
<div class="position">
<input type="checkbox" class="checkbox" name="product_id" id="product_id">
<label for="product_id">label</label>
</div>
<img src="assets/images/products/image.jpg">
<span class="brand">Brand</span>
<span class="name">Product</span>
</label>
to work "+" tags need to go one by one
css:
input[type=checkbox]:checked + label { }
html:
<input type="checkbox" id="id"><label for="id">...</label>
input[type=checkbox]:checked + label {
background-color: red;
}
<input type="checkbox" id="id">
<label for="id">Test</label>
For anyone struggling
The input and the element that you're modifying need to be directly next to the each other, for the :checked rule to work.
#hidden {
display: none;
height: 100px;
background: red;
}
:checked + #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<!-- NEED TO BE NEXT TO EACH OTHER ^ -->
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
I want to target properties of two divs through css when :hover over one div.
#down-icn {
position: absolute;
bottom: 0; right: 25px;
color: #fff;
-webkit-transition: color 0.25s ease; border-color 0.5s ease;
-moz-transition: color 0.25s ease; border-color 0.5s ease;
-ms-transition: color 0.25s ease; border-color 0.5s ease;
-o-transition: color 0.25s ease; border-color 0.5s ease;
transition: color 0.25s ease; border-color 0.5s ease;
}
#down-icn:hover {
color: #ef5c30;
border-color: #ef5c30;
}
.icn {
border: 2px solid #fff;
border-radius: 50%;
padding: 10px;
margin-left: 10px;
}
!!! .icn:hover {
border: 2px solid #000;
color: #000;
}
when hovered on #down-icn I want to change the properties of both #down-icn and .icn.
EDIT - html
<a href="#footer-anchor">
<div id="down-icn" data-0="opacity: 1; bottom: 25px;" data-550="opacity: 0; bottom: 100px;">more<i class="icn fa fa-chevron-down fa-2x"></i></div>
</a>
Why don't you just use your anchor for hover selection?
a:hover > #down-icn{
color: #ef5c30;
border-color: #ef5c30;
}
a:hover > .icn {
border: 2px solid #000;
color: #000;
}
OR
#down-icn:hover{
color: #ef5c30;
border-color: #ef5c30;
}
#down-icn:hover > .icn {
border: 2px solid #000;
color: #000;
}
My transition outs are not working, I am using the latest Chrome Browser and when I hover over the button, the transition in is working, however the transition out just cuts right off.
My CSS
.btn{
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active{
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue{
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover{
background-color: #6FC6FF;
transition-duration: .02s;
display: inline-block;
}
}
HTML is on this JSFiddle.
You need to put the transition on the base state not the :hover then it will transition between all states.
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.blue:hover {
background-color: #6FC6FF;
display: inline-block;
}
<div id="buttons"> Blu
</div>
You are adding a transition to the :hover state, not to the actual element.
It's usually better to define a transition on the element itself, and then change properties to it's states, this way it understands that whatever the state change, it should transition from one to the other.
.btn{
transition: background-color 0.2s ease-out;
}
.btn:active{
...
}
.btn:hover{
...
}
Your just need to insert this on your btn main class
.btn{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
I'm making a menu that looks like this one http://exclusivelyhistailoring.com/ Notice how when a link is hovered, the text moves its way to the right and changes colors too.
Unhovered State
Hovered State
Here's what I have so far :
.text-glow {
font-size:4em;
color: #FFFFFF;
font-family:Arial!important;
-webkit-stroke-width: 6.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
text-shadow: 1px 0px 20px white;
-webkit-transition: width 0.9s;
/*Safari & Chrome*/
transition: width 0.9s;
-moz-transition: width 0.9s;
/* Firefox 4 */
-o-transition: width 0.9s;
/* Opera */
}
.text-glow:hover, .text-glow:focus .text-glow:active {
color: transparent;
text-shadow: 0 0 5px #000;
}
Any ideas?
That's a flash file, so to create something similar to that using CSS, what you will need is text-indent property or padding-left, whatever you are fine with..
I've made the below demo from scratch..
Demo
html, body {
height: 100%;
background: #FF9000;
}
ul {
margin: 20px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
}
ul li {
margin-bottom: 5px;
text-shadow: 0 0 10px #fff;
color #000;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
ul li:hover {
color: #fff;
text-indent: 15px;
}
a {
color: inherit;
text-decoration: none;
}