Develop Reference

I need to make this button have delay when i click then to go others pages

when i add its not delay then removes it. and its delay, but what should i do to make this button have href to click and delay then joining other pages (i'm newbie)
conclude that I need when I click and reload 3 seconds to join other pages I do.
I tried many things but it didn't work. I'm very worried about my problem.
Thanks you all.
.button {
position: relative;
padding: 1px 20px;
background-color: #4bb34e;
border: none;
outline: none;
border-radius: 2px;
width: 100px;
cursor: pointer;
line-height: 1.33;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -10px;
transition: 0.5s;
}
.button:hover span {
padding-right: 20px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background: #4CAF50;
}
.button__text {
font: bold 16px "Quicksand", san-serif;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50%;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
input,
p {
font: 17px Calibri;
padding: 3px 5px;
}
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
<button type="button" class="button" onclick="setTimeout(() => this.classList.toggle('button--loading'), 1500)">
<span class="button__text">Submit</span></button>

I use jquery to fix this, try this method:
$('.button').click(function() {
$('.button').addClass("button--loading");
setTimeout(function() {
location.href = 'https://stackoverflow.com/'; // replace your URL
}, 3000);
});
.button {
position: relative;
padding: 1px 20px;
background-color: #4bb34e;
border: none;
outline: none;
border-radius: 2px;
width: 100px;
cursor: pointer;
line-height: 1.33;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -10px;
transition: 0.5s;
}
.button:hover span {
padding-right: 20px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background: #4CAF50;
}
.button__text {
font: bold 16px "Quicksand", san-serif;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50%;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
input,
p {
font: 17px Calibri;
padding: 3px 5px;
}
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button">
<span class="button__text">Submit</span></button>

You can check this, which is similar to your question :
https://stackoverflow.com/a/69774273/17282751
Use the JavaScript [setTimeout][1] function to delay your redirect.
For example, if you have a link as below, call the function on link click:
Click Here
Create a JavaScript function and add the delay using the setTimeout function:
function onBtnClickHandle(){
setTimeout(function(){
window.location="https://www.google.com/"
}, 3000);
}
You can set the timeout value as per your animation timing.

maybe you are looking for this
<button type="button" class="button" onclick="waitAndRedirect(this, 'https\://google.com')">
<span class="button__text">Submit</span>
</button>
<script>
let id
function waitAndRedirect(elem, url) {
elem.classList.toggle('button--loading')
if (id) {
clearTimeout(id)
id = null
} else {
id = setTimeout(() => {
window.location.replace(url)
}, 3000)
}
}
</script>

How to connect two options and toggle switch buttons

I would like to connect two labels and toggle switches.
If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.
I made a toggle switch along this link https://www.w3schools.com/howto. This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.
I can't use other frameworks such as jQuery. Pure JavaScript support is available.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 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 {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

This would be simple to solve with JavaScript, but it's a more interesting question with pure CSS/HTML.
Explanation: pointer-events: none disables clicks from having any effect. pointer-events: all is used selectively on child elements to re-enable clicking on them, depending on the checked state of the input.
/* the interesting bit */
.label {
pointer-events: none;
display: flex;
align-items: center;
}
.switch,
.input:checked + .label .left,
.input:not(:checked) + .label .right {
pointer-events: all;
cursor: pointer;
}
/* most of the stuff below is the same as the W3Schools stuff,
but modified a bit to reflect changed HTML structure */
.input {
display: none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .label .slider {
background-color: #2196f3;
}
input:focus + .label .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .label .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* styling to make it look like your screenshot */
.left, .right {
margin: 0 .5em;
font-weight: bold;
text-transform: uppercase;
font-family: sans-serif;
}
<input class="input" id="toggle" type="checkbox">
<label class="label" for="toggle">
<div class="left">
Option A
</div>
<div class="switch">
<span class="slider round"></span>
</div>
<div class="right">
Option B
</div>
</label>

This will help you perfectly using two radio button.
HTML :-
<div class="normal-container">
<div class="smile-rating-container">
<div class="smile-rating-toggle-container">
<form class="submit-rating">
<input id="meh" name="satisfaction" type="radio" />
<input id="fun" name="satisfaction" type="radio" />
<label for="meh" class="rating-label rating-label-meh">Bad</label>
<div class="smile-rating-toggle"></div>
<div class="toggle-rating-pill"></div>
<label for="fun" class="rating-label rating-label-fun">Fun</label>
</form>
</div>
</div>
</div>
CSS:-
.smile-rating-container {
position: relative;
height: 10%;
min-width: 220px;
max-width: 520px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: grey;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: grey;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 58px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: grey;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 182px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: #2196f3;
}
#fun:checked~.rating-label-meh {
color: grey;
}
#fun:checked~.mouth {
border: 4px solid #2196f3;
border-bottom-color: rgba(1, 1, 1, 0);
border-right-color: rgba(1, 1, 1, 0);
border-left-color: rgba(1, 1, 1, 0);
top: 23px;
left: 291px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: #2196f3;
}
#fun:checked~.smile-rating-toggle {
left: 282px;
}
#fun:checked~.rating-eye-left {
left: 292px;
}
#fun:checked~.rating-eye-right {
left: 316px;
}
#fun:checked~.toggle-rating-pill {
background-color: #2196f3;
}
#fun:checked~.rating-eye {
background-color: #2196f3;
}

I make a side pull-down menu. Does not work

I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>

Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.

Changing Button Color on Click [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>

Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>

Issues with the animation

search increase and decrease in width just when the .search_icon is clicked,because in actual moment its changing size when im clicking .search class.And can someone explaing why these code doesnt work with actual jquery library version,thanks.
https://codepen.io/anon/pen/ENqppw
<div class="search">
<input type="text" class="inp"><span class="search_icon"></span></input>
</div>
$background-color: #2A2E37;
$search-bg-color: #242628;
$icon-color: #00FEDE;
$transition: all 0.5s ease;
.inp{
width: 240px;
height: 60px;
box-shadow: none;
border: none;
background: transparent;
color: #fff;
padding: 20px 0px 20px 45px;
font-size: 40px;
&:focus {
outline: none;
}
}
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.7s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid $icon-color;
display: block;
position: relative;
margin-top:-77px;
margin-left:20px;
transition: $transition;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search').on('click', function() {
$(this).toggleClass('open');
$(this).toggleClass('clicked');
});
});

You can use this instead:
$(function() {
$('.search').on('click', function() { // Expand search on click on it
$(this).addClass('open clicked');
});
$('.search_icon').on('click', function(e) { // Collapse search on click on search icon
e.stopPropagation();
$(this).closest('.search').removeClass('open clicked');
});
});