How to redirect a web page using html, css and javascript with help of button

Question

How to redirect a web page using HTML, CSS and JavaScript with help of button.Moreover I want a CSS effect when I click the button. I want to redirect a web page to another web page after the CSS effect completed

I tried to redirect a web page after the CSS effect.

It works only redirect it does not show the CSS effect when I click the redirect button

<a>
    <div class="grid__item theme-1">
        <button class="action"></button>
        <button class="particles-button">Home</button>
    </div>
</a>

I want to redirect a web page after the CSS effect completed when I click a button

You'll need javascript for that so you can override the default browser behavior. Just query the element, do preventDefault so you nullify the event, do the modify based on a specific time, then do the redirect. What's the specific modification you're trying to do? — CptKicks
– CptKicks, Commented Sep 6, 2019 at 4:25

Syed Sarfraz Ali Zaidi · Accepted Answer · 2019-09-06 04:35:51Z

2

$(".particles-button").on("click",function(e){
e.preventDefault();

$(this).addClass("css_effect_class");

//set the time when your css effect completes
setTimeout(function(){ 
window.location.href="http://stackoverflow.com";
 }, 3000);
});

answered Sep 6, 2019 at 4:35

Syed Sarfraz Ali Zaidi

215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nandhakumar Over a year ago

"$(this).addClass("css_effect_class");" css_effect_class is means my class of that effect

SotoArmando · Accepted Answer · 2019-09-06 04:45:28Z

Once you set up transitions using css over your buttons the animation can runs just once you got your mouse over so normally you shouldn't need to setup something to animate before user clicks on it. I think you could try with this. this will trigger back once the animation is done so you can just redirect the page then.

<style>
    .particles-button {
        transition-duration: 455ms;
        color: blue;
        font-size: 1.5rem;
        padding: 12px;
    }

    .particles-button.active {
        color: red;
        font-size: 2rem;
        padding: 12px;

    }
</style>
<html>
<header>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</header>
<a>
    <div class="grid__item theme-1">
        <button class="particles-button" onclick="this.classList.toggle('active')">Homes</button>
    </div>
</a>

</html>


<script>
    $(".particles-button").click(function () {
        $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
            function (event) {
                console.log("do your thing :D")
            });
    });
</script>

Collectives™ on Stack Overflow

How to redirect a web page using html, css and javascript with help of button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related