We Keep Coding

CSS/JS? How to reflect a border-radius?

I try to code a little rock-paper-scissors based game and used the CSS/JS-code from this youtube tutorial to create neon buttons with a snake animation around the edges of the button.
https://youtu.be/3RRgVHd2TXQ
I then softened the edges of the buttons using "border-radius: 15px" - but the reflection has still sharp corners.
How can I solve this?
Also the snake-animation to shine around the edges of the button does not work :( - would be great to know why!?
Try the game: https://bamory.com/?hotlink=FARTWAR (click link to start a game-session and invite another player with the session-code appearing on top of the screen)
CODE:
html{
text-align: center;
}
}
body.chapter2 {
color: yellow;
}
input {
margin: 10px;
height: 50px;
width: 90%;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050801;
flex-direction: column;
}
.button
{
border-radius: 15px;
position: relative;
display: inline-block;
padding: 10px 15px;
margin: 10px 10px;
color: #03e9f4;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
width: 25%;
}
.button:nth-child(1)
{
filter: hue-rotate(290deg);
}
.button:nth-child(3)
{
filter: hue-rotate(110deg);
}
.button:hover
{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.button span
{
position: absolute;
display: block;
}
.button span:nth-child(1)
{
top: 0;
left: 0;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
#keyframes animate1
{
0%
{
left: -100%;
}
50%, 100%
{
left: 100%;
}
}
.button span:nth-child(2)
{
top: -100px;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2
{
0%
{
top: -100%;
}
50%, 100%
{
top: 100%;
}
}
.button span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
#keyframes animate3
{
0%
{
right: -100%;
}
50%, 100%
{
right: 100%;
}
}
.button span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4
{
0%
{
bottom: -100%;
}
50%, 100%
{
bottom: 100%;
}
}
Thanks for your help! (it´s my first time using JS / stackoverflow - please forgive me if I inserted too much code or did other mistakes!)

how about give up box-reflect and use transform. take look at this:
css box-reflect alternative for older browser
it's more messy but why not more to learn

Full screen overlay menu toggle

I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay.
I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: 0.35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: 0.35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
<div class='container'>
<h1>Top right corner, click it!</h1>
</div>
<div class='button_container' id='toggle'>
<span class='top'></span>
<span class='middle'></span>
<span class='bottom'></span>
</div>
<div class='overlay' id='overlay'>
<nav class='overlay-menu' id="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>

I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As 'fulloverlay' is the Id of the parent nav element so instead of selecting it like:
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
You can write like this:
$("#fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
then it works.

Cannot display source code from JSFiddle to blogger

I have a problem with my source code. I hope you read well and understand and do not immediately act ignorant of my question.
I very often come across people who are smart but don't like to understand other people's questions.
I've edited a quiz via JSFiddle. With the help of this forum, It works fine on JSFiddle.
But when I tried this source code on blogger, it didn't work very well. The question doesn't arise. Someone said that something was wrong with the CSS. I edited the CSS, but it didn't work. Even when I delete the entire CSS, the questions still don't appear while the rest of the section appears.
I will show the difference with the following image.
The first image is an image that works well in JSField. The second image is the appearance of blogger with full CSS. The third image is the appearance of blogger without CSS. The CSS I mean is the CSS I use on JSField.
I have changed the contents several times, even deleted some parts. But in the end it didn't work and I returned the CSS.
One thing is for sure, even though I tried the question and answer choices from the quizzes it didn't appear on blogger.
I have asked this many times, I hope to find answers to my questions in this forum.
here I give my file link in JSFiddle
and here's the CSS for my problem. I apologize for showing all the CSS because I don't know which part is the problem in blogger
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.quizArea{
width: 95%;
margin: auto;
padding:10px;
position: relative;
text-align: center;
}
.mc_quiz{
color: #3a5336;
margin-bottom: 0px;
}
.multipleChoiceQues{
width:90%;
margin: auto;
padding: 10px;
}
.quizBox
{
width:90%;
margin: auto;
}
.question{
text-align: center;
font-size: 0.8em;
}
.buttonArea
{
text-align: right;
height: 4.5em;
}
button {
height: 4em;
width:130px;
padding: 1.5em auto;
margin: 1em auto;
background-color:#f1f2ec;
border: none;
border-radius: 3px;
color: #7aa4a9;
text-transform: uppercase;
letter-spacing: 0.5em;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
#next:hover,
#submit:hover,
.viewanswer:hover,
.viewchart:hover,
.backBtn:hover,
.replay:hover {
letter-spacing: 0.8em;
}
.viewanswer,
.viewchart,
.replay{
width: 30%;
}
.backBtn{
width:100px;
height: 2em;
font-size: 0.8em;
margin-left: 70%;
}
#next:active,
#submit:active,
.viewanswer:active,
.viewchart:active,
.backBtn:active,
.replay:active {
letter-spacing: 0.3em;
}
.resultArea{
display: none;
width:70%;
margin: auto;
padding: 10px;
}
.chartBox{
width: 60%;
margin:auto;
}
.resultPage1{
text-align: center;
}
.resultBox h1{
}
.briefchart
{
text-align:center;
}
.resultBtns{
width: 60%;
margin: auto;
text-align:center;
}
.resultPage2,
.resultPage3
{
display: none;
text-align: center;
}
.allAnswerBox{
width: 100%;
margin: 0;
position: relative;
}
._resultboard{
position: relative;
display:inline-block;
width: 40%;
padding: 2%;
height: 190px;
vertical-align: top;
border-bottom: 0.6px solid rgba(255,255,255,0.2);
text-align: left;
margin-bottom: 4px;
}
._resultboard:nth-child(even){
margin-left: 5px;
border-left: 0.6px solid rgba(255,255,255,0.2);
}
._resultboard:nth-last-child(2),
._resultboard:nth-last-child(1){
border-bottom: 0px;
}
._header{
font-weight: bold;
margin-bottom: 8px;
height: 90px;
}
._yourans,
._correct{
margin-bottom: 8px;
position: relative;
line-height: 2;
padding: 5px;
}
._correct{
background: #968089 ;
}
.h-correct{
background: #968089;
}
.h-correct:after,
._correct:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00c";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #2dceb1;
}
.h-incorrect{
background: #ab4e6b ;
}
.h-incorrect:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00d";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #ff383e;
}
.resultPage3 h1,
.resultPage1 h1,
.resultPage2 h1{
text-align: center;
padding-bottom: 10px;
border-bottom: 1.3px solid rgba(21, 63, 101,0.9);
color: #3a5336;
}
.my-progress {
position: relative;
display: block;
margin: 3rem auto 0rem;
width: 100%;
max-width: 950px;
}
progress {
display: block;
position: relative;
top: -0.5px;
left: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f1f2ec ;
width: 100%;
height: 2.5px;
background: none;
-webkit-transition: 1s;
transition: 1s;
will-change: contents;
}
progress::-webkit-progress-bar {
background-color: #c72828;
}
progress::-webkit-progress-value {
background-color:#153f65;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.my-progress-indicator {
position: absolute;
top: -6px;
left: 0;
display: inline-block;
width: 5px;
height: 5px;
background: #7aa4a9;
border: 3px solid #f1f2ec;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transition-delay: .3s;
transition-delay: .3s;
will-change: transform;
}
.my-progress-indicator.progress_1 {
left: 0;
}
.my-progress-indicator.progress_2 {
left: 9%;
}
.my-progress-indicator.progress_3 {
left: 18%;
}
.my-progress-indicator.progress_4{
left: 27%;
}
.my-progress-indicator.progress_5 {
left: 36%;
}
.my-progress-indicator.progress_6 {
left: 45%;
}
.my-progress-indicator.progress_7 {
left: 54%;
}
.my-progress-indicator.progress_8 {
left: 63%;
}
.my-progress-indicator.progress_9 {
left: 72%;
}
.my-progress-indicator.progress_10 {
left: 81%;
}
.my-progress-indicator.progress_11 {
left: 90%;
}
.my-progress-indicator.progress_12 {
left: 100%;
}
.my-progress-indicator.active {
-webkit-animation: bounce .5s forwards;
animation: bounce .5s forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s;
border-color: #153f65 ;
}
.animation-container {
position: relative;
width: 100%;
-webkit-transition: .3s;
transition: .3s;
will-change: padding;
overflow: hidden;
}
.form-step {
position: absolute;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
will-change: transform, opacity;
}
.form-step.leaving {
-webkit-animation: left-and-out .5s forwards;
animation: left-and-out .5s forwards;
}
.form-step.waiting {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.form-step.coming {
-webkit-animation: right-and-in .5s forwards;
animation: right-and-in .5s forwards;
}
#-webkit-keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#-webkit-keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
display: none;
}
ul{
list-style-type: none;
width: 220px;
margin: auto;
text-align: left;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height:30px;
}
label{
color: #c72828;
}
label:before {
content: "";
width: 15px;
height: 15px;
background : #c72828;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff ;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked ~ .bullet {
position:absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
background : #fff;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #c72828 ;
opacity:0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked ~ .bullet .line.zero{
animation-name:drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.one{
animation-name:drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.two{
animation-name:drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.three{
animation-name:drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.four{
animation-name:drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.five{
animation-name:drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.six{
animation-name:drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.seven{
animation-name:drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0%{
opacity: 0;
transform: scale(10);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
and if you want to see it in blogger view, click here

how to finish animation effect after returning from new tab?

function navigation(id) {
switch (id) {
case 'btn4':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
case 'btn5':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
}
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color: #122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border: 0.2rem solid #64ef65;
border-radius: 35px;
background: linear-gradient(to bottom, #53D853 0%, #0F860F 100%);
}
input[type="checkbox"]:checked+label::before {
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked+label::after,
input:checked+label span {
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1" onclick="navigation(this.id);">
<input type="checkbox" id="defaultBtn">
<label for="defaultBtn"><span><strong>Access</strong></span>
</label>
</div>
i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue. i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue.

With simple trick : use <a> tag
onclick="setTimeout('animRedirect()', 250);" give in checkbox onclick
I add a tag before checkbox and add url
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
------------------Add here check box---------------------------
</a>
I fixed this problem in codepen : https://codepen.io/Rayeesac/pen/ExKKPZe
function animRedirect(){
document.getElementById("reDirect").click();
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color:#122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border:0.2rem solid #64ef65;
border-radius: 35px;
background:linear-gradient(to bottom,#53D853 0%,#0F860F 100%);
}
input[type="checkbox"]:checked + label::before{
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked + label::after,
input:checked + label span{
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#reDirect{
outline: none;
width: 100%;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1">
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
<input type="checkbox" id="defaultBtn" onclick="setTimeout('animRedirect()', 250)">
<label for="defaultBtn">
<span><strong>Access</strong></span>
</label>
</a>
</div>

Keyframe animate absolute positioned buttons

I have one large button at z-index: 1, covering up two smaller buttons at z-indices 0.9 and 0.8, respectively. On click of the first button, they should slide out. This only occurs when they do not have the "position: absolute;" property, however this causes them to be placed lower on the screen, rather than beneath the element that's meant to be covering them.
Link to CodePen
https://codepen.io/Gladdstone/pen/aYObGy
function setConversion(obj) {
if($(obj).hasClass("buttonpress")) {
$(obj).removeClass("buttonpress");
// add "in" animation classes
$("#celsius").addClass("celsius-in");
$("#fahrenheit").addClass("fahrenheit-in");
// remove "out" animation classes
if($("#celsius").hasClass("celsius-out")) {
$("#celsius").removeClass("celsius-out");
$("#fahrenheit").removeClass("fahrenheit-out");
}
} else {
$(obj).addClass("buttonpress");
// add "out" animation classes
$("#celsius").addClass("celsius-out");
$("#fahrenheit").addClass("fahrenheit-out");
// remove "in" animation classes
if($("#celsius").hasClass("celsius-in")) {
$("#celsius").removeClass("celsius-in");
$("#fahrenheit").removeClass("fahrenheit-in");
}
}
}
.celsius-in {
animation-name: celsius-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.celsius-out {
animation-name: celsius-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-in {
animation-name: fahrenheit-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-out {
animation-name: fahrenheit-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.overmap {
position: absolute;
z-index: 1;
}
.temp-small {
position: absolute;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
margin-left: 75%;
height: 10vw;
width: 10vw;
transition: box-shadow 0.3s ease-in-out;
}
#celsius {
z-index: 0.8;
}
#fahrenheit {
z-index: 0.9;
}
#temp {
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 2rem;
text-align: center;
vertical-align: middle;
padding-right: 10%;
margin-left: 75%;
height: 20vw;
width: 20vw;
transition: box-shadow 0.3s ease-in-out;
}
#tempbutton {
bottom: 10%;
width: 100%;
}
#keyframes celsius-out {
from { margin-left: 75%; }
to { margin-left: 30%; }
}
#keyframes celsius-in {
from { margin-left: 30%; }
to { margin-left: 75%; }
}
#keyframes fahrenheit-out {
from { margin-left: 75%; }
to { margin-left: 50%; }
}
#keyframes fahrenheit-in {
from { margin-left: 50%; }
to { margin-left: 75%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
<button id="temp" type="button" onclick="setConversion(this);">78°</button>
<button id="fahrenheit" type="button" class="temp-small">°F</button>
<button id="celsius" type="button" class="temp-small">°C</button>
</div>

Is this you want ??
function setConversion(obj) {
if($(obj).hasClass("buttonpress")) {
$(obj).removeClass("buttonpress");
// add "in" animation classes
$("#celsius").addClass("celsius-in");
$("#fahrenheit").addClass("fahrenheit-in");
// remove "out" animation classes
if($("#celsius").hasClass("celsius-out")) {
$("#celsius").removeClass("celsius-out");
$("#fahrenheit").removeClass("fahrenheit-out");
}
} else {
$(obj).addClass("buttonpress");
// add "out" animation classes
$("#celsius").addClass("celsius-out");
$("#fahrenheit").addClass("fahrenheit-out");
// remove "in" animation classes
if($("#celsius").hasClass("celsius-in")) {
$("#celsius").removeClass("celsius-in");
$("#fahrenheit").removeClass("fahrenheit-in");
}
}
}
#charset "utf-8";
/* CSS Document */
.celsius-in {
animation-name: celsius-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.celsius-out {
animation-name: celsius-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-in {
animation-name: fahrenheit-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.fahrenheit-out {
animation-name: fahrenheit-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.overmap {
position: absolute;
z-index: 1;
}
.temp-small {
position: absolute;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 1.2rem;
text-align: center;
vertical-align: middle;
height: 10vw;
width: 10vw;
transition: box-shadow 0.3s ease-in-out;
right: 60px;
top: 45px;
}
#temp {
position: relative;
border-radius: 50%;
border-color: #007aff;
background-color: #007aff;
box-shadow: 0px 4px 10px #888888;
color: #ffffff;
font-size: 2rem;
text-align: center;
vertical-align: middle;
padding-right: 10%;
margin-left: 75%;
height: 20vw;
width: 20vw;
transition: box-shadow 0.3s ease-in-out;
z-index: 5;
}
#tempbutton {
bottom: 10%;
width: 100%;
position: relative;
}
#keyframes celsius-out {
from { right: 40px; }
to { right: 50%; }
}
#keyframes celsius-in {
from { right: 50%; }
to { right: 40px; }
}
#keyframes fahrenheit-out {
from { right: 40px; }
to { right: 70%; }
}
#keyframes fahrenheit-in {
from { right: 70%; }
to {right: 40px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempbutton" class="overmap">
<button id="temp" type="button" onclick="setConversion(this);">78°</button>
<button id="fahrenheit" type="button" class="temp-small">°F</button>
<button id="celsius" type="button" class="temp-small">°C</button>
</div>