This question already has answers here:
CSS Transition - eases in but doesn't ease out?
(2 answers)
Closed 2 years ago.
So i want to create a button, which moves upwards an creates a Little shadow underneath, if hovered and that is working out so far, but the problem is, the Animation just resets, if i stop hovering, while it should kind of play the animation backwards. In all examples I have seen it just does that without any extra command.
For example: My button moves upwards by 5 pixels in .3 seconds if hovered, if you stop hovering it should move downwards 5 pixels in 0.3 seconds again, but it just does it instantly.
I would really appreciate any help on the concern, i just can't comprehend it.
Here is the Code i use:
<head>
.probtn {
border-color: #282E34;
color: #282E34;
}
.probtn:hover {
background-color: #282E34;
color: white;
transition: all 0.3s;
transform-origin: bottom;
box-shadow: 0px 5px 5px 0px gray;
transform: translate(0px,-5px);
-webkit-transform: translate(0px,-5px);
-moz-transform: translate(0px,-5px);
-ms-transform: translate(0px,-5px);
-o-transform: translate(0px,-5px);
}
.btn {
border: 2px solid #282E34;
background-color: white;
color: #282E34;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 5Px;
}
</head>
<Body>
<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>
</Body>
Define the transition: all 0.3s; on your .probtn class instead of the :hover. Else once the hover-state is removed the transition property is removed as well.
.probtn {
border-color: #282E34;
color: #282E34;
transition: all 0.3s; /* moved to base class instead of hover state */
transform-origin: bottom;
}
.probtn:hover {
background-color: #282E34;
color: white;
box-shadow: 0px 5px 5px 0px gray;
transform: translate(0px,-5px);
-webkit-transform: translate(0px,-5px);
-moz-transform: translate(0px,-5px);
-ms-transform: translate(0px,-5px);
-o-transform: translate(0px,-5px);
}
.btn {
border: 2px solid #282E34;
background-color: white;
color: #282E34;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 5Px;
}
<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>
Related
So I was recently trying to make an header in which I was using CSS flex property for the alignment of the elements.
Problem came when I tried to do some animations...
Here is what happened when I used the direct child of flex property, i.e. in flexbox I used content--left,center,right to align the elements.
video link(in which translation happens at the login element) - https://drive.google.com/file/d/1TrBrW4KoI43SH0IJj5AQYiq2qNWFqcwv/view
my code(s) for it...
HTML
<header className='second-header'>
<a href='/tours' className='second-header__content--left'>
All Tours
</a>
<img
src='images/logo-white.png'
alt='Logo'
className='second-header__content--center'
/>
<a href='/' className='second-header__content--right'>
Log In
</a></header>
CSS
.second-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $color-grey-dark;
font-size: 1.4rem;
font-weight: 300;
text-transform: uppercase;
a {
text-decoration: none;
color: $color-grey-light-2;
margin: 0 3rem;
}
img {
height: 3rem;
width: 6rem;
}
&__content--left,
&__content--right {
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
&:hover,
&:active {
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 1);
transform: translateY(-.25rem);
-webkit-transform: translateY(-.25rem);
-moz-transform: translateY(-.25rem);
-ms-transform: translateY(-.25rem);
-o-transform: translateY(-.25rem);
}
}
}
}
Now this is the thing that happens when I add another element in content right the translate does not work
video link - https://drive.google.com/file/d/1wvTGNCe98qbAb1-aZQZofTar0ow84Ci_/view
my code(s) for the same
HTML
<header className='second-header'>
<a href='/tours' className='second-header__content--left'>
All Tours
</a>
<img
src='images/logo-white.png'
alt='Logo'
className='second-header__content--center'
/>
<section className='second-header__content--right'>
<a href='/' className='second-header__content--right-login'>
Log In
</a>
<button className='second-header__content--right-signup'>
Sign Up
</button>
</section>
</header>
CSS
.second-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $color-grey-dark;
font-size: 1.4rem;
font-weight: 300;
text-transform: uppercase;
a {
text-decoration: none;
color: $color-grey-light-2;
margin: 0 3rem;
}
img {
height: 3rem;
width: 6rem;
}
&__content--left,
&__content--right-login {
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
&:hover,
&:active {
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 1);
transform: translateY(-.25rem);
-webkit-transform: translateY(-.25rem);
-moz-transform: translateY(-.25rem);
-ms-transform: translateY(-.25rem);
-o-transform: translateY(-.25rem);
}
}
&__content--right {
button {
text-decoration: none;
background-color: $color-grey-dark;
padding: 1rem 2rem;
border: 1px solid $color-grey-light-2;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
color: $color-grey-light-2;
text-transform: uppercase;
font-family: Lato;
font-size: 1.4rem;
font-weight: 300;
&:hover,
&:active {
cursor: pointer;
color: $color-grey-dark;
background-color: $color-white;
}
}
}
}
As you all can see in the second part there is no transform(only text-shadow gets applied) happening and I would really want to know whether its my code architecture that's cause of the problem or something else. If you found my codes too long please check my architecture and content--right, content--right-login elements. Thanks to the kind soul in advance for giving me a fix for this.
I have created a circle with a fontAwesome icon in it, and on hover, rotating it 180 degree that is working fine, But on hover when I mouseover and when icon moving to 180 its moving up by one pixel, not sure why.
My question is why its moving up by one pixel on hover, I'm not able to find the issue.
Here is the JSFiddle demo
EDIT Please note that its happening in Firefox only.
.share-icon {
background-color: #f00;
border-radius: 50%;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
float: left;
font-size: 18px;
height: 45px;
line-height: 45px;
margin-top: 50px;
position: relative;
text-align: center;
width: 45px;
transition: all 0.5s ease 0s;
cursor: pointer;
}
.share-icon:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="share-icon" onclick="shairIcon(this)">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
Refer this css, i have made correction.
You should add fa icon class on hover and add transition property.
.share-icon:hover .fa-share-alt {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transition: all 500ms ease;
}
Working DEMO!!!
Honestly I don't know exactly why but if you increase your font-size just by two pixels you'll get rid of this jump. Simply update your code to the following
.share-icon {
background-color: #f00;
border-radius: 50%;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.share-icon i {
transition: all 0.5s ease 0s;
}
.share-icon:hover i {
transform: rotate(180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="share-icon" onclick="shairIcon(this)">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
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 new to CSS3 and for the sake of learning it, I'm using CSS3d transform: rotateY property to rotate a button 180 with an ease transition. But due to 180 flip the words are shown in reversed. What can be done so that words in the button are shown in exactly the same manner before being rotate.
From what I've read so far is that I need to customize the back portion of the button but I don't know how to do that.
Here is my Codepen code: http://codepen.io/vikrantnegi007/pen/QbozLq
HTML:
<div class="container">
<div class="jumbotron">
<h1>Let's have fun!</h1>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
</div><!-- /.jumbotron -->
</div>
CSS Code:
#import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
margin: 0 auto;
width: 500px;
background-color: rgba(35, 35, 35, 0.4);
text-align: center;
border-radius: 5px;
border: 2px solid #000;
}
.jumbotron {
font-family: "Cinzel";
padding-bottom: 20px;
}
h1 {
color: rgba(50, 50, 50);
}
button {
height: 50px;
width: 100px;
cursor: pointer;
text-transform: uppercase;
background-color: rgba(65, 69, 67, 0.5);
color: #fff;
border: 1.5px solid #fff;
border-radius: 5px 30px 5px 30px;
box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
margin-left: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
button:hover {
background-color: rgba(180, 180, 180, 0.4);
-webkit-transform: rotateY(180deg) scale(1.5);
transform: rotateY(180deg) scale(1.5);
}
button:active {
-webkit-transform: translate(1px, 1px) scale(0.9,0.9);
transform: translate(1px, 1px) scale(0.9, 0.9);
}
Generally when you rotate an element, the backside comes to the front and vice-versa. Since your background color is semi transparent, the reverse side is getting shown through.
One way to avoid the text being displayed in reverse is to put the text inside its own element (say a <span> tag) and then apply the reverse transform when the button is hovered on (like in the below snippet):
#import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
margin: 0 auto;
width: 500px;
background-color: rgba(35, 35, 35, 0.4);
text-align: center;
border-radius: 5px;
border: 2px solid #000;
}
.jumbotron {
font-family: "Cinzel";
padding-bottom: 20px;
}
h1 {
color: rgba(50, 50, 50);
}
button {
height: 50px;
width: 100px;
cursor: pointer;
text-transform: uppercase;
background-color: rgba(65, 69, 67, 0.5);
color: #fff;
border: 1.5px solid #fff;
border-radius: 5px 30px 5px 30px;
box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
margin-left: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
button:hover {
background-color: rgba(180, 180, 180, 0.4);
transform: rotateY(180deg) scale(1.5);
}
button:active {
transform: translate(1px, 1px);
transform: scale(0.9, 0.9);
}
button > span {
display: block;
transition: all 1s ease;
}
button:hover > span {
transform: rotateY(-180deg);
}
<div class="container">
<div class="jumbotron">
<h1>Let's have fun!</h1>
<button id="btn1"><span>btn1</span></button>
<button id="btn2"><span>btn1</span></button>
<button id="btn3"><span>btn1</span></button>
<button id="btn4"><span>btn1</span></button>
</div>
<!-- /.jumbotron -->
</div>
An alternate method would be to create a backside for the element and then make it get displayed when the button is being hovered on (like you had mentioned in question). You can find a sample for that in my answer here.
So I've got a little "intro" box that I styled effects for using fontawesome icons. The effect is nice and I would like to keep it, however later down the page I have a "stats" box and I want to use the same style & effect but using normal numbers so that the number can dynamically change via a php script. Of course, whenever I use normal numbers the effect doesn't work because I styled the CSS to work with the fontawesome icons. Is there a way to make the text parse as an icon, or do I need to rewrite my css?
HTML
<!-- Statistics -->
<div class="row">
<div class="span12 centre">
<h2 class="b-title">Some Statistics</h2><br /><br />
<!--Section 1-->
<div class="stats-box stats-box1">
<div class="text-center block-box">
<div class="stats-effect-inner"> <a class="stats-effect icon-unlock icon-3x" href="#"></a> </div>
<h3 style="text-decoration: none;">Domains</h3>
<p>The number of free domains given.</p>
<br />
</div>
</div>
</div>
Relative CSS is here. Full styling CSS is in the fiddle.
/*------------ Hover Effect Stats ------- */
.stats-effect { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 90px; height: 90px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; }
.stats-effect:after { pointer-events: none; position: absolute; width: 100%; height: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.stats-effect:before { speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; }
/* Effect 1 */
.stats-effect-inner .stats-effect { background: rgba(255, 255, 255, 0.1); -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }
.stats-effect-inner .stats-effect:after { top: -7px; left: -7px; padding: 7px; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: scale(.8); -moz-transition: -moz-transform 0.2s, opacity 0.2s; -moz-transform: scale(.8); -ms-transform: scale(.8); transition: transform 0.2s, opacity 0.2s; transform: scale(.8); opacity: 0; -moz-box-shadow: 0 0 0 4px #ffffff;/*FF 3.5+*/ -webkit-box-shadow: 0 0 0 4px #ffffff;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color=#ffffff)";/*IE 8*/ box-shadow: 0 0 0 4px #ffffff; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color=#ffffff);/*IE 5.5-7*/
}
/* Effect */
.stats-box1:hover .stats-effect-inner .stats-effect, .stats-box2:hover .stats-effect-inner .stats-effect, .stats-box3:hover .stats-effect-inner .stats-effect { background: rgba(255, 255, 255, 1); color: #27CCC0; }
.stats-box1:hover .stats-effect-inner .stats-effect:after, .stats-box2:hover .stats-effect-inner .stats-effect:after, .stats-box3:hover .stats-effect-inner .stats-effect:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
/*------------ Icon Hover Effect ------- */
.stats-effect1 > img { padding: 20px; }
.stats-effect-inner1 { position: absolute; right: -33px; top: -33px; }
.stats-effect1 { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; color: #FF6850; cursor: pointer; display: inline-block; font-size: 0; height: 70px; margin: 12px 21px 15px 11px; position: relative; text-align: center; width: 70px; z-index: 1; }
.stats-effect1:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: ""; height: 100%; pointer-events: none; position: absolute; width: 100%; }
.stats-effect1:before { background: none repeat scroll 0 0 #FAFAFA; border-radius: 50% 50% 50% 50%; display: block; font-size: 48px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 90px; text-transform: none; }
.stats-effect-inner1 .stats-effect { background: none repeat scroll 0 0 rgba(13, 30, 219, 0.1); transition: background 0.2s ease 0s, color 0.2s ease 0s; }
TL;DR - I want the icon within the circle in the box to be a normal text number but have the same effect when moused over.
Thanks so much for your help!
EDIT: UPDATED FIDDLE: Fiddle
EDIT: Minimized CSS: Fiddle