Change animation origin on mouse off event - css

I've got some css/html code. I wanna improve my "unhover" state by doing following: when I hover over a button there is a before element sliding from left to right. I can easily change it from right to left. However when I do the "unhover" action, before element slides in the opposite direction - from right to left. What I want to achieve is animating it's width from 100% to 0% but from left to right. What should I do to get the result?
https://codepen.io/trueFalse24/pen/YzKNgYm
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
}
}
}

I've modified your pen to get the effect by changing a few usages of the left and right properties. My edits are marked by comments below.
.container{
padding:0;
margin: 0;
box-sizing: border-box;
background: #3498db;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
right: 0; /* Replaced left */
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
right: auto; /* Added */
left: 0; /* Added */
}
}
}
}

Related

Animate button with two backgrounds

Im trying to do the same button but without the need to make hover (running the animated background all the time).
I've tried different approach like using background-clip, shadows, etc but unfortunately without success.
Maybe if I use another element like a div and span can work but I really want to do it with a button.
Codepen
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #000;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
What is making your ::before pseudo-element to hide when it's not hovered is opacity:0. If you remove it, you will have the desired effect. Also, you might want to remove the glow-on-hover:hover:before selector since it's not going to be any use.

CSS - yet another transition not working question

Trying to understand transition css property, but can't seem to figure out why this code is not working. Border needs to go from solid to dotted
.home {
color: #ff652f;
font-weight: 700;
border-bottom: 18px solid #ff652f;
-webkit-transition: border-bottom 3s ease-in-out;
transition: border-bottom 3s ease-in-out;
}
.home {
border-bottom: 18px dashed #ff652f;
}
Made a jsfiddle here - https://jsfiddle.net/h7925b8g/
Would like the transition to happen slowly. Any ideas what I am doing wrong? Any help is greatly appreciated!
As mentioned in comments, border-style is not animatable, so you can't simply use the transition property to change it.
Instead, you can fake it. How exactly you pull this off depends on what you want the transition to look like. One approach is to use a repeating linear-gradient for the dashed effect and then transition that to overlay the border (either a literal border or just some other element that acts like a border).
For example, sliding up from the bottom:
.home {
color: #ff652f;
font-weight: 700;
width: 200px;
padding-bottom: 10px;
position: relative;
}
.home::before,
.home::after {
content: '';
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.home::before {
height: 10px;
background-color: orange;
z-index: 0;
}
.home::after {
height: 0px;
transition: height 350ms ease;
background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
background-size: 20px 100%;
background-repeat: repeat;
z-index: 1;
}
.home:hover::after {
height: 10px;
}
<div class="home">Hover me!</div>
Or sliding in from the left:
.home {
color: #ff652f;
font-weight: 700;
width: 200px;
padding-bottom: 10px;
position: relative;
}
.border-animation {
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
height: 10px;
overflow: hidden;
background-color: orange;
}
.border-animation::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
background-size: 20px 100%;
background-repeat: repeat;
transform: translateX(-100%);
transition: transform 350ms ease;
}
.home:hover .border-animation::after {
transform: translateX(0);
}
<div class="home">Hover me!<span class="border-animation"></span></div>

Modyfing some attributes in CSS to make button shadow glow automatically, not only on hover

lastly I'm developing a website, and I'm gonna implement here a little "button" in CSS.
My question is: How to make its shadow glowing without having to put cursor on it and hover? I want its shadow to glow automatically. I've tried to change some attributes from code below, but it doesn't work. Anybody know how to do it exactly? Any help appreciated :)
Here is some code snippet I tried to modify:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #000;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
Whole code and the exact button I wanna implement can be found on: https://codepen.io/leandrosimoes/pen/VqZxaG

How to draw a line using pseudo element right below text and ignore the padding?

I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text

CSS: How do I make the lines in this hover effect stay with the word inside of it?

This is my modification of someone else's hover effect. So I am not familiar with the working of btn-2 class.(I don't know the syntax used)
Here is my CSS code:
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
body {
background-color: black;
}
a {
text-decoration: none;
color: tomato;
font-size: 50px;
font-family: 'Oswald', sans-serif;
}
.container {
padding: 1em;
text-align: center;
vertical-align: middle;
}
.btn-2 {
letter-spacing: 10px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 30px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(tomato, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: tomato;
transition: width 350ms ease-in-out;
width: 50%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 50%;
}
I want to use the effect for button in my navigation bar. But I have 3 problems to solve:
I want the lines above and below the word that appear when you hover it to be of the same width as the word.
I want the word to be centered relative to the line. That is, the line should grow out from the middle point of the word.
The lines isn't going where the word is going.
Some discoveries I make, which I don't know the cause of:
The 2 lines will be longer when .comtainer{padding=1em} than 5em.
When I delete text-align and vertical-align in the .container class, the hovering lines stay centered, but the word goes to the left of the window.
I'm not sure how good I understand you, but here some example I made
a {
color: #333;
display: inline-block;
padding: 15px 0;
position: relative;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in-out;
&:before,
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: #333;
transition: all 250ms ease-in-out;
}
&:before {
top:0;
}
&:after {
bottom: 0;
}
&:hover {
letter-spacing: 5px;
&:before,
&:after {
width: 100%;
}
}
//Trick is here
span {
&:before {
content:attr(title);;
letter-spacing: 5px;
display:block;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
margin-bottom:-1px;
}
}
}
<span title="Hover Me">Hover Me</span>
You can check my example here

Resources