Stylish Next and Previous buttons for image Gallery using simple CSS and No Javascript

Hello viewers and developers, here i will be showing you how to create stylish next and previous buttons for an image gallery using simple CSS and No JavaScript. Below image shows you these buttons. This is an effective way of showing the prev and next buttons on hover rather than having always showing buttons.

[sc:demobuttons demolink=”http://demo.techglimpse.com/prev-next-buttons/?image=1″ boxlink=”http://adf.ly/PkslP”]

Step 1:  In the head section of your html template, include the below CSS Code.

<style type=”text/css”>
#picture-holder {
text-align: center;
}
#picture-holder:hover .btn{
display:block;
}
#image-slider{
position:relative;
margin:0 auto;
overflow:hidden;
width:50%;
}

.ps_prev, .ps_next{
width:40px;
height:40px;
position:absolute;
z-index:100;
top:180px;
line-height:40px;
text-align:center;
display:none;
cursor:pointer;
}
.ps_prev{
background:#FFF;
padding:15px 10px 4px 12px;
opacity: 0.8;
left:30px;

}
.ps_next{
background:#FFF;
padding:15px 10px 4px 12px;
opacity: 0.8;
right:30px;
}

.ps_next img {
width:20px;
}

.ps_prev img {
width:20px;
}
#button {
font-family: “Helvetica Neue”, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #686868;
font-size: 14px;
font-weight: bold;
border: 1px solid #AFAFAF;
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
</style>

Step 2: Pull images from gallery and display on a div on hover shows the next and previous buttons.

<div id=”image-slider”>
<div id=”picture-holder”>
<img src=”https://techglimpse.com/wp-content/uploads/2013/01/micromax-canvas-a116-hd.jpg” alt=”micromax canvas A116 HD” />
<a href=”<next-image-link>”>
<div class=”btn ps_next” id=”button”>
<img src=”right.png”>
</div>
</a>
<a href=”<previous-image-link>”>
<div class=”btn ps_prev” id=”button”>
<img src=”left.png”>
</div>
</a>
</div>
</div>

Now enjoy seeing the smart and stylish next and previous buttons which shows up only on hover.

[sc:demobuttons demolink=”http://demo.techglimpse.com/prev-next-buttons/?image=1″ boxlink=”http://adf.ly/PkslP”]