Page transition css on button click (right, left, up, down)

Question

Page transition css on button click (right, left, up, down)

1.4k Views Asked by Melissa At 06 April 2025 at 06:33

I'm planning a webpage in Wordpress with navigation arrows (buttons) on top, right, bottom and left of the page screen. With clicking on one of the buttons you get to the next page – but with a page transition depending on the button you click on.

in short: user clicks on "right arrow" = next page slides in from the right // user clicks on "down arrow" = next page slides in from bottom ...

As the pages can appear in all the directions, the button I click on should give the indication in which direction the page has to slide. How can I achieve that via css?

Or does it work the other way round? The current page has to slide out right, left, top, bottom on click?

I found something like this: https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ But in this case all contents are in one html file. That's not a real page-transition... Thank you

Original Q&A

There are 1 best solutions below

**Meysam Asadi** · Answer 1

$('.btnRight').click(function() {
   $('.rightPage').toggleClass("activeRight");
});
$('.btnLeft').click(function() {
   $('.leftPage').toggleClass("activeLeft");
});
$('.btnBottom').click(function() {
   $('.bottomPage').toggleClass("activeBottom");
});
$('.btnTop').click(function() {
   $('.topPage').toggleClass("activeTop");
});

.btn {
  background-color: lightgray;
  border: none;
  color: white;
  padding: 3px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 2rem;
  outline: none;
}


.rightPage
{
   height:600px;
   position:absolute;
   top:0;
   right:-100%;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeRight
{
   right:0;
}

.leftPage
{
   height:600px;
   position:absolute;
   top:0;
   left:-100%;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeLeft
{
   left:0;
}

.bottomPage
{
   height:600px;
   position:absolute;
   bottom:-100%;
   left:0;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeBottom
{
   bottom:0;
}

.topPage
{
   height:600px;
   position:absolute;
   top:-100%;
   left:0;
   width:100%;
   background:green;
   transition:all 2s;
   text-align:left;
}
.activeTop
{
   top:0;
}

<body style="width:100%;text-align:center;overflow: hidden;">
<div>
<div class="rightPage">
   <button type="button" class="btn btnRight">close</button> 
</div>
<div class="leftPage">
   <button type="button" class="btn btnLeft">close</button> 
</div>

<div class="bottomPage">
   <button type="button" class="btn btnBottom">close</button> 
</div>
<div class="topPage">
   <button type="button" class="btn btnTop">close</button> 
</div>

</div>



<button type="button" class="btn btnRight">Show Right</button>
<button type="button" class="btn btnLeft">Show Left</button>
<button type="button" class="btn btnBottom">Show Bottom</button>
<button type="button" class="btn btnTop">Show Top</button>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Page transition css on button click (right, left, up, down)

There are 1 best solutions below

Related Questions in CSS

Related Questions in CSS-TRANSITIONS

Related Questions in PAGE-TRANSITION

Trending Questions

Popular # Hahtags

Popular Questions