I am trying to create a class which adds opacity and a trnasparent prelodaer spinner when a button gets clicked, so far I have the following:
.button-processing{
opacity: .5;
cursor: default;
&:before{
content: url("#{$image-path}hostelbookers/icons/loader-submit.GIF");
position: absolute;
top: 48px;
left: 88px;
width: 64px;
height: 64px;
z-index: 1;
}
}
I want to be able to only add a class to achieve the effect.
However I am struggling as the spinner is not transparent is there a CSS solution for it or a good looking transparent gif?
Actually SVGs/CSS animation are the better way to go, since it's cleaner & smaller file size.
http://code.tutsplus.com/tutorials/mobile-web-create-an-svg-loading-spinner--mobile-13556
I have ended up doing like so:
.button-processing{
position: relative!important;
.static-newsletter-pod,
button,
input[type="submit"],
input[type="button"] {
opacity: .5;
}
input[type="submit"],
input[type="button"]{
margin-bottom: 0;
}
button,
input[type="submit"] {
cursor: wait!important;
}
&:before{
content: "";
border-radius: 100%;
margin: auto;
border: 2px solid $white;
border-bottom-color: transparent;
height: 25px;
width: 25px;
background: 0 0!important;
display: inline-block;
-webkit-animation: rotate .75s 0s linear infinite;
animation: rotate .75s 0s linear infinite;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}
Related
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.
I want a button hover transition using an (I think) mask in the background.
A button that in normal state has a white background and black letters would have a black background sliding in from the side on hover making the letters white on the go. Like so:
I got it working using a before and after pseudo:
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
border: none;
padding: 10px 20px;
position: relative;
transition: all 0.5s ease;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
position: relative;
z-index: 999;
}
.button--slide:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: calc(-100% - 35px);
top: 0;
background-color: #000;
transition: left 0.5s ease;
}
.button--slide:after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 0px;
height: 0px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #000;
transition: left 0.5s ease;
}
.button--slide:hover {
color: #fff;
}
.button--slide:hover:before {
left: 0;
}
.button--slide:hover:after {
left: calc(100% - 35px);
}
See fiddle https://jsfiddle.net/5arj1emx/
It's not quite how I want it: I would like the background to mask the letters like in the example so that the letters turn white as the black background slides over it.
Is this possible?
do a background animation for both the pseudo element and the span and make the one of the span to color the text. I used a big transition time to better see the result;
body {
background-color: #efefef
}
.button--slide {
background-color: #fff;
color: #000;
border-radius: 10px;
padding:0;
border: none;
position: relative;
cursor: pointer;
overflow: hidden;
}
.button--slide span {
display:block;
padding: 10px 20px;
position: relative;
transition: all 5s ease;
color:transparent;
font-weight:bold;
background:linear-gradient(-45deg,#000 50%,#fff 0) right/220% 100% no-repeat;
-webkit-background-clip:text;
background-clip:text;
}
.button--slide:before {
content: "";
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom:0;
background:linear-gradient(-45deg,transparent 50%,#000 0) right/220% 100% no-repeat;
transition: 5s ease;
}
.button--slide:hover span,
.button--slide:hover:before {
background-position:left;
}
<button class="button--slide">
<span>SEE OUR GLOBES</span>
</button>
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
Hie!
Transition doesn't work after animation with animation-fill-mode: forwards;
First animation fires and ends on hover, but then after unhovering transition doesn't apply.
Codepen here
It reproduces in chrome and safari. In firefox works fine.
pug:
button Button
scss:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 100%;
right: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
animation: nav-link-hover .25s forwards;
}
}
}
#keyframes nav-link-hover {
0% {
left: 0;
right: 100%;
}
100% {
left: 0;
right: 0;
}
}
UPDATE
I've found workaround but will wait for any answer and gladly accept it if it will be better or for example successfully uses broken keyframes.
Still don't know what's wrong with keyframes in chrome/safari, but have found simple workaround.
Now first 'before'-element is on right with no width right: 0; width: 0;.On hover it moves to left with 100% width, that begins to transitionally grow: left: 0; right: auto; width: 100%;.
Finally, when hover was lost, 'before' starts to decreasing, resting on the right end again.
New code:
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
}
}
Codepen
Animating elements require a defined state before the animation begins. If you define a state on a trigger (ie. hover), some unexpected behaviour may occur. Therefore, you should set your starting point before the hover.
In this case, simply move left: 0; from the hover to the "non-hover" properties of &:before
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
right: auto;
width: 100%;
}
}
}