Website Footer (and Roll-overs)

As most websites traditionally have a footer is a important part of what makes a website a fluid navigational experience. Initially my nav bar was fixed to the top of the page, even when you scrolled it stay at the top, making it an easy way to get around without having to go to the top, however I felt it took away from the rest of the design and as I haven't styled it much yet it just didn't fit. So I then thought how will I tackle this problem of having to scroll to the top when you want to change page, and that got me thinking, footers are usually used for social media icons, location of that company / design agency but that type of information isn't applicable here so I came up with solution of making the footer a very simple 'to the top' anchor and it looks great, it matches the rest of my layout and design and here's how I did it!

Anchors were used to create a link from the bottom of the page, back to the top, so I put an anchors destination <a id=""totop"> </a> immediately after the body tag, this would ensure that it was at the very top of the page and would't go halfway up. I then created a div, and gave it a class of footer, this was a grey box with 100% width just to create the space where it will go, I then put the anchor inside of the div, applied the smooth scroll class which I used for the scroll hint anchor where instead of jumping to the anchor destination it slowly scrolls like you would with your mouse. and I then used an image I found online of an arrow and put that inside the anchor.

Here's the HTML:

This is the HTML very simply and I did some in-tag styling for the image as I felt it unnecessary to type out the CSS.

Now for the CSS, I wanted the entire footer to be a link to the top, not just the small arrow image so for this I made the anchor position relative,100% height and display:block this gave it 100% width. this then made the entire grey boxed div the anchor making it more user friendly on computers, but also mobiles.
Here is the CSS Code for the Footer Div, and the anchor.

So my footer was there, and was working but now I had to position the arrow image in the center of the div. So I gave it a padding-top and bottom and it inherited the position of the anchor is was within with was centered, putting it straight in the middle. Currently it was now just an light grey arrow inside a dark grey div and didn't really give me the impression that it was a to the top, so I decided the give it a border of 2px, and a border radius of 50px; giving it a circle around the arrow, I then added a pseudo :hover style that changed the border colour from grey, to green (the same color as my nav roll-over). 

Here's the CSS: 

The roll-over was good, but not good enough the sharp snap from grey to green needed to match the rest of the webpage so I did a quick google search and found a ease-in-out transition and I set the transition time to 500ms, now I had the rollover I wanted but the transition only occured when I hovered onto it, when I took my cursor off the anchor it snapped back to grey, then after some research I discovered that you need to apply the transition to the image aswell, not just the pseudo :hover! 

Before :hover

After :hover