I've made an animation for a button and it works OK for all last versions of browsers, but I had updated Firefox from v.48 to v.49 and after it my animation was broken. Please if anyone knows what exactly happened help me
example: https://jsfiddle.net/3woa73fz/ (the line to the left that appears and disappears)
code:
HTML:
<div class="button__container">
<a href="#" class="button">
<span class="button__text">Learn More</span>
</a>
</div>
CSS:
.button {
&__container {
position: relative;
left: 0;
right: 0;
bottom: 0;
}
overflow: hidden;
display: inline-block;
position: relative;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
height: 54px;
margin: 0 auto;
padding: 15px 38px 14px 37px;
background-color: transparent;
border-radius: 200px;
color: transparent;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: inherit;
transition: border 0.3s ease;
z-index: 1;
}
&__text {
position: relative;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
color: #fff;
transition: color 0.3s ease;
}
}
.button:hover:before {
transform: translateX(0);
}
.button:hover:after {
border-color: #fff;
}
.button:hover .button__text {
color: #24BE51;
}
}
inside ".button" try adding :
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
after ".-webkit-mask-image"
Related
I made an X with a circle using css.
There is a green line that is sticking out on top of the circle, how do I place it under the circle?
How would this be done?
code: https://jsfiddle.net/6wod3pLm/
That is all I am doing in the code.
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
You don't need all these code. Here is an easier idea:
.exitnew {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
--b:7px; /* the thickness*/
--c:blue 90deg,green 0; /* the coloration */
background:
conic-gradient(from 90deg at var(--b) var(--b),var(--c))
calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
calc(50% + var(--b)) calc(50% + var(--b));
border: 5px solid red;;
border-radius: 50%;
transform:rotate(45deg);
}
<button class="exitnew" type="button" aria-label="Close"></button>
You just need to use z-index property on the :after CSS selector:
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
z-index: -1
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
:before and :after are like html bread on you element sandwich. :before is the bottom slice, and :after is the top slice.
Add a negative z-index to the :before, :after styles and that will position your :after behind the button the same as the :before.
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
z-index: -1;
}
EDIT WITHOUT Z-INDEX
.exitnew {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
margin: auto;
padding: 0;
width: 48px;
height: 48px;
cursor: pointer;
background: blue;
border: none;
border-radius: 50%;
clip-path: circle(50%);
transition: all 1s ease;
overflow: hidden;
}
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
width: 38px;
top: 22px;
left: 5px;
right: 5px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
}
.exitnew:after {
transform: rotate(-45deg);
}
.exitnew:hover {
background: transparent;
}
.exitnew:hover:before,
.exitnew:hover:after {
background: green;
}
.exitnew b {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid red;
border-radius: 50%;
}
<button class="exitnew" type="button" aria-label="Close"><b></b></button>
You can set the z-index property to send the green line(s) backward, "behind" the circle:
.exitnew:before,
.exitnew:after {
content: "";
position: absolute;
height: 5px;
top: 22px;
left: -1px;
right: -1px;
background: green;
transform: rotate(45deg);
transition: all 1s ease;
z-index: -1;
}
here's an example: https://jsfiddle.net/q7zprh4w/
This is a solution without b and z-index:
.exitnew {
position: relative;
width: 48px;
height: 48px;
border: 5px solid red;
border-radius: 50%;
background-color: blue;
}
.exitnew::before {
content: "";
display: block;
position: absolute;
width: 10.416%;
height: 100%;
top: 0;
left: 44.792%;
background-color: green;
transform: rotate(45deg);
}
.exitnew::after {
content: "";
display: block;
position: absolute;
width: 10.416%;
height: 100%;
top: 0;
left: 44.792%;
background-color: green;
transform: rotate(-45deg);
}
I put the red border to the button itself. So the two pseudo element ::before and ::after aren't overlapping the red border.
Note: I don't use box-sizing: border-box
I'm made this button that when hovered transitions the ::before in to change how the button looks. It works fine when there is no border but when a border is added it leaves a little bit of the background.
.submit-button {
font-size: 16px;
color: #FFFFFF;
background-color: red;
padding: 14px 16px;
border: 3px solid #FFFFFF;
transition: color 300ms cubic-bezier(0.3, 1, 0.8, 1);
border-radius: 24px;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #FFFFFF;
border-radius: 24px;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
}
.submit-button:hover::before {
transform: scaleX(1);
}
.log-out-button:hover {
color: red
}
div {
background-color: red
}
<div><button class="submit-button log-out-button">hello</button></div>
Slightly different look but you could simplify your CSS and solve your border radius problem by depending on the overflow: hidden styling and having the background color of your transform fill the space of the shape (essentially falling behind the border).
.submit-button {
font-size: 16px;
color: #FFFFFF;
background-color: red;
padding: 14px 16px;
border: 3px solid #FFFFFF;
border-radius: 24px;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
margin: 4px;
}
.submit-button::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #FFFFFF;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.3, 1, 0.8, 1);
}
.submit-button:hover::before {
transform: scaleX(1);
}
.log-out-button:hover {
color: red
}
div {
background-color: red
}
<div><button class="submit-button log-out-button">hello</button></div>
I'm trying to create a hover effect, but the text isn't showing above the :before class.
Here is a codepen of the project https://codepen.io/designextras/pen/WNrJdbR
I'm not sure what edit's I would need to make to show the text above since the button text I can't add a z-index
Here is the css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
Here is the html
<button class="btn-2">HOVER</button>
Try to add this css code:
.btn-2 {
z-index: 1;
}
.btn-2:hover:before {
z-index: -1;
}
html
<button class="btn-2"><span>HOVER</span></button>
css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.btn-2 span {
color: orange;
z-index: 3;
position: relative;
}
.btn-2:hover span {
color: #000;
}
eg:
ref: https://codepen.io/nani554/pen/jOWxYmG
I am having some issues I cannot seem to figure out with styling a toggle switch as required. I currently have it like this:
It however needs to look like this:
Here is my HTML:
<label class="switch"><input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
Here is my css:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px!important;
height: 24px!important;
cursor: pointer;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
display: block;
width: 22px!important;
height: 22px!important;
margin: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 26px;
border-radius: 20px;
transition: margin .3s ease-in 0s;
transition-property: margin;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: 0s;
box-shadow: 1px 2px 7px #444;
}
input:checked + .slider {
background-color: #236093;
}
input:focus + .slider {
box-shadow: 0 0 1px #236093;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
Not sure where I am going wrong here or what I need to adjust. I have tried changing the transform and the padding but I cannot seem to get it right.
You can use the following solution:
.switch {
cursor: pointer;
display: inline-block;
height: 24px;
position: relative;
width: 50px;
overflow:hidden;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
background: #ccc;
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
background: #fff;
border-radius: 50%;
bottom: 1px;
box-shadow: 3px 0px 7px #444;
content: "";
display: block;
height: 22px;
left: 1px;
position: absolute;
right: 50px;
top: 1px;
width: 22px;
transition-property: all;
transition-duration: .6s;
}
input:checked + .slider {
background: #236093;
}
input:checked + .slider:before {
box-shadow: -3px 0px 7px #002551;
left: calc(100% - 23px); /** width of .slider:before + 1px */
}
.slider.round {
border-radius: 24px;
}
<label class="switch">
<input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
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%;
}
}
}