I've used getElementsByClassName to change the button text when people click on it, but with the JavaScript String Rule, it will not change the original text but return a new string instead.
The original text of the button is in the span tag, and I use CSS to make it visible by color and z-index. The problem is when the new string replace the original one, it will not be in the span tag which causes it to be hidden under the animation div.
If you don't understand what I mean, please check the code below:
function myFunction() {
document.getElementsByClassName("demo")[0].innerHTML = "Copied";
setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "Changing Back"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
Use a querySelector to get the desired <span>
document.querySelector(".demo span").innerHTML
function myFunction() {
document.querySelector(".demo span").innerHTML = "Copied";
setTimeout(function(){ document.querySelector(".demo span").innerHTML = "Changing Back"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
You have span inside of button, so you need to add it when you're changing html:
function myFunction() {
document.getElementsByClassName("demo")[0].innerHTML = "<span>Copied</span>";
setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "<span>Changing Back</span>"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
Related
I'm really struggling to make my head around transitions. I've got a round button and I would like the div to show when the button is hovered. But I would like to have and "(un)fold" effect. Could you help me to add the animation to this css?
var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");
btn.addEventListener("click", function() {
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
});
.help_button {
position: fixed;
bottom: 10rem;
right: 10rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
line-height: 150%;
color: #ffffff;
}
.feedback-title {
position: fixed;
bottom: 10rem;
right: 12.5rem;
height: 5rem;
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
visibility: hidden;
}
<div class="feedback-title" id="title">Feedback form</div>
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
</button>
I'm not even sure whether my approach here is correct.
Best practice for an unfold effect should be using the transform 3d properties. Wrap the feedback form in a container and transform the inner element from 100% from the x-as to 0%.
* {
margin: 0;
padding: 0;
}
.button-wrapper {
position: relative;
display: inline-block;
margin: 50px;
cursor: pointer;
}
.button-helper {
white-space: nowrap;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
transform: translate3d(0, -50%, 0);
transition: .5s ease;
}
.button {
padding: 10px 30px;
}
.button-wrapper:hover .button-helper {
transform: translate3d(calc(100% + 15px), -50%, 0);
}
<button class="button-wrapper" type="button">
<p class="button-helper">Button info label</p>
<div class="button">
button text
</div>
</button>
Here is how could do it only with CSS and HTML:
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
}
.help_button {
display:block;
box-sizing:border-box;
position: relative;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
color: #ffffff;
}
.feedback-title {
position: absolute;
right:2.3rem;
top:0;
height: 100%
transform:translate(-5px, -5px);
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
z-index:-1;
opacity:0;
transition : .5s ease;
width:12rem;
}
.help_button:hover .feedback-title {
opacity:1;
}
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
<span id="title" class="feedback-title">Feedback from</span>
</button>
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>
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 made a modal popup that reveals coupon code on my website, and the button is linked to the offer page. I want the offer page to open in background tab without losing focus on my page. is there any way to do it? here is the working link for my modal popup on button reveal coupon code and buy, thank you.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="location.href='#popup1'">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>
Try window.open('link', 'name');
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
function openView() {
location.href='#popup1';
window.open('https://stackoverflow.com/questions/60432716/', 'name');
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="openView()">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>
i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's