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.
Related
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>
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
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 */
}
}
}
}
I've recently discovered the following approach for text-progress styling and wonder if there is a workaround to grow the element width from the center, so the text would also fill the from center instead of from the left side.
body {
background-color: black;
}
p {
color: rgba(255, 255, 255, .4);
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
height: 85px;
position: relative;
}
p:before {
max-width: 100%;
width: 0;
height: 85px;
color: #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
display: block;
animation: background-fill 15s ease-in-out infinite forwards;
}
#keyframes background-fill {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<p data-text='Text'>Text</p>
You can achieve that by also animate left and text-indent
I also changed your p to display as inline-block, so it animate the text and not white space.
Thanks to Gaby aka G. Petrioli, it appears Firefox have issue with percent-based text-indent, so I added a CSS hack to overcome that. And again thanks to Gaby, for his now delete answer, that solved the Firefox issue (though unfortunately fails on IE)
body {
background-color: black;
}
p {
color: rgba(255, 255, 255, .4);
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
height: 85px;
position: relative;
display: inline-block;
}
p:before {
max-width: 100%;
width: 0;
height: 85px;
color: #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
display: block;
animation: background-fill 5s ease-in-out infinite forwards;
}
#keyframes background-fill {
0% {
left: 50%;
text-indent: -50%;
width: 0;
}
100% {
left: 0;
text-indent: 0;
width: 100%;
}
}
/* Begin - Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
p:before {
width: auto;
right: 50%;
left: 50%;
display: flex;
justify-content: center;
}
#keyframes background-fill {
0% {
right: 50%;
left: 50%;
}
100% {
right: 0;
left: 0;
}
}
}
/* End - Firefox bug fix */
<p data-text='Text'>Text</p>
An alternative to the CSS hack, is a small script, that, on page load, measure the actual width of the element and set the text-indent as px instead of %.
Hoping someone can point me right...
I have been trying all day to figure out how to hide a flash behind some html elements, and then reveal the flash object when hovering using css transitions.
I came up with two solutions, each is only %50 of what I really want.
The first example transitions when you hover, and you can click the links, but I want it to transition like example two.
The second example transitions the way I want, but anything behind cannot be clicked.
Where did I mess up? Are my z-index(s) not getting parsed in example two?
Examples: http://jsfiddle.net/zyD4D/
HTML:
<object> Links Work
<br />But Curtains Are Wrong
</object>
</div>
<hr>
<div id="theatre2"> <em id="curtain-left2"></em>
<em id="curtain-right2"></em>
<object> Links Don't Work
<br />But Curtains Are Right
</object>
</div>
CSS:
div#theatre {
border: inset black 0px;
height: 425px;
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 30px;
position: relative;
overflow: hidden;
background: black;
}
div#theatre #curtain-left {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
transition: all 4s ease;
background-size: 100%;
}
div#theatre #curtain-right {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
transition: all 4s ease;
background-size: 100%;
}
#curtain-left {
left: 0;
}
#curtain-right {
right: 0;
}
div#theatre:hover #curtain-right {
width: 0;
background-size: 1px;
transition: all 4s ease;
}
div#theatre:hover #curtain-left {
width: 0;
background-size: 1px;
transition: all 4s ease;
}
div#theatre2 {
border: inset black 0px;
height: 425px;
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 30px;
position: relative;
overflow: hidden;
background: black;
}
div#theatre2 #curtain-left2 {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
background-size: 100%;
}
div#theatre2 #curtain-right2 {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
background-size: 100%;
}
#curtain-left2 {
left: 0;
}
#curtain-right2 {
right: 0;
}
div#theatre2:hover #curtain-right2 {
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background-position: +301px 0px, left top;
}
div#theatre2:hover #curtain-left2 {
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background-position: -301px 0px;
}
.object {
margin: 0.0em auto;
position: relative;
z-index: 1;
}
Change your css to only transition the left and right margins of the left and right curtains respectively.
div#theatre #curtain-left {
...
transition: margin-left 4s ease;
margin-left:0;
left:0;
...
}
div#theatre #curtain-right {
...
transition: margin-right 4s ease;
margin-right:0;
right:0;
...
}
div#theatre:hover #curtain-right {
margin-right:-300px;
}
div#theatre:hover #curtain-left {
margin-left:-300px;
}
and remove the background-size change on hover.
I fixed up your fiddle. http://jsfiddle.net/zyD4D/2/