How to Center a Button Image and make it navigate to next article?

Question

Guys let me start over it seems nobody gets my simple question. We are not all Pro's when it comes to coding. So please have patience with me I am still learning. I just want to know which part of my html/css code do you require to get a better understanding of what I want to create.

So to describe what I have now:

1 index.html 2 style.css

At the top of my website there is a background image which is within a slide container. The menu is a minimal open/close button floating on the right.

Now I want to use an image file of an arrow, align this in the center of my background image and use it to navigate to the next section of my website which is called "About Me". I know how to link for example an index.html to about.html file, but in this case I have a single index file where the menu buttons/sections are in a div and li class a linked as ahref.

So my question is what do I need to do to make that arrow button link to ahref"Aboutme" section. What and where do I have to put in this code in html and css. I have a lot of code available but please tell me which part you need.

Thanks for your help

<!-- HOME (SLIDER) -->
<section id="home" class="notoppadding text-light">
    <div class="section-inner">


    <!-- REVOLUTION SLIDER -->
    <div class="rev-slider-container">
        <div class="rev-slider" >
            <ul>

                <!-- THE FIRST SLIDE -->
                <li data-transition="slidedown" data-slotamount="5" data-masterspeed="1200" >
                    <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
                    <img src="files/uploads/slider-bg1.jpg"   alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

                    <!-- LAYER NR. 1 -->    
                    <div class="tp-caption srcaption-bigwhite lft ltb"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="0"
                    data-speed="800"
                    data-start="400"
                    data-easing="easeInOutQuad"
                    data-endspeed="800"
                    data-endeasing="easeInOutQuad"
                    style="z-index: 2"><strong></strong>
                    </div>

                </li> <!-- end first slide -->

                </li>

            </ul>

        </div>
    </div> <!-- END .rev-slider-container -->        
    <!-- REVOLUTION SLIDER -->

Answer 1

jsBin demo

<a class="nextpageLink" href="#about"></a>

CSS:

.nextpageLink{
   position: absolute;
   z-index: 2;
   margin: 0 auto;
   left:0;
   right:0;
   bottom: 10px;
   width:80px;
   height:80px;
   background: url(img/next.png) 0 0 ; // 80x160px sprite image
}
.nextpageLink:hover{
   background-position: 0 -80px ;
}

let's say you create a sprite image and on button hover you simply change the background position.

+-------+    >> 80 x (80*2) px background image
|       |
| gray  |
|       |
+-------+    >> on hover move up by -80px
|       |
| white |
|       |
+-------+

---

If you don't want to navigate to another page, than your link needs to anchor-target an ID element on the page:

<a class="nextpageLink" href="#about"></a>

so you also need the anchor-related ID - assigned to the about element like:

<div id="about" class="wrapper">
   <!-- ABOUT DIVS AND CONTENT HERE-->
</div>

and your page will scroll.

---

If you want to scroll with an animation there's already plenty of similar questions here on stackoverflow that involve the use of JS. Use Goog or the StackOverflow's search input.

Tip: while you do some Goog to filter only results that are relevant to StackOverflow do like i.e:

how to animate page scroll :stackoverlfow