CODEWITHSUNDEEP
javascripthtmlcss
Nandhakumar
Nandhakumar

Reputation: 33

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

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

Upvotes: 3

Views: 437

Answers (2)

SotoArmando
SotoArmando

Reputation: 118

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>

Upvotes: 1

Syed Sarfraz Ali Zaidi
Syed Sarfraz Ali Zaidi

Reputation: 21

$(".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);
});

Upvotes: 2

Related Questions