Introduction
Buttons that stick to the sides of the browser are becoming more and more popular. Most of it started with a companies feedback button which turned into people using them for their own convenience. In this article I am going to go over the CSS code for making it stick to the side.
The first thing that is required is an anchor. We can add this to the top of the page and it will be located just below the first div (or above your header) You can really locate this where ever you would like your readers eyes to be. Some people prefer the title of the first blog post.)
Once the code has been placed it should look like this:
1
2
3
| <body>
<a name="top" id="top"></a>
<div class="header"> |
Anchors
Now that we have placed our anchor there is something you need to know if unfamiliar. In order to link to an anchor all you need to do is add a ‘name’ and an ‘id.’ When linking to an anchor you will be required to have an ‘href’ like so:
Notice how the ‘href’ is simple a pound sign followed by the name of the anchor. If you would like a contact button the you can do something similar to the following anchor:
1
| <h3><a href="http://codewithdesign.com/contact.php#contact">Contact</a> |
Depending on where the anchor for contact is the user can be linked to a page and moved directly to the contact form. This just allows you to skip information and the only reason this is used as an example is because I wanted you to know exactly how you can use anchors across page.
Styling the page
Now that we have our two anchors we will get into the portion of styling that will make this button stick to the side. The first thing we are going to be doing is enclosing the link in a div. The results of this will look as such:
1
| <div class="sidelinks-container"><h3><a href="#top">Top</a></h3></div> |
The placement of this code is completely irrelevant since we will be adding a position property to it. I threw it directly under my anchor to keep it all together if changes are eventually needed.
Now we need to begin the actual styling of the div. This will require two separate styling, one for the div itself and the other will be for the ‘<h3>’ tag.
The first thing that we will be adding to our style will be the positioning and size of the box. As noted earlier the position and how the container acts with the sides of the browser is key. Because it is important we will start by adding the following lines of code to the div.
1
2
3
4
5
6
7
8
| .sidelinks-container {
position:fixed;
left:0px;
width:50px;
height:100px;
bottom:40px;
overflow:hidden;
} |
As we go through the code you will notice that everything is standard. The position is fixed so even though the div is outside of the container it is still properly displayed on the screen. The left property forces the box to the left side of the screen. The width and height are required properties. If the width was not set it would expand across the screen and overlap the content. The height it required so the box does not collapse on the contents that are within. The final important property is the ‘bottom’ style, this will force the box to position itself a certain distance from the bottom of the browser. In our case it will be ’40px’ away.
The next important piece of code will change the h3 properties. When it comes down to it you can actually just add class to the link or throw it in a span but I chose to stick with ‘<h3>’ because I had originally created it with the default h3 font style.
The code for the next chunk of CSS will look as follows:
1
2
3
4
5
6
7
| .sidelinks-container h3{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
padding:0px;
font:32px Verdana, Arial, Helvetica, sans-serif;
line-height:50px;
} |
Live demo
By going through the code we will notice that everything is font styling with an added little text rotation that works with IE. Now that we have most of the CSS and the HTML we can throw it all together and see how well it works out.
Below there will be a copy of the html used in this example along with the CSS. By clicking the image you can see a demo version of this page in action. Simply scroll down and click the fixed div on the left.
The CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| .sidelinks-container h3{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
padding:0px;
font:32px Verdana, Arial, Helvetica, sans-serif;
line-height:50px;
}
.sidelinks-container {
position:fixed;
left:0px;
width:50px;
height:100px;
padding:0px;
bottom:40px;
background: #444;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
overflow:hidden;
} |
The HTML
1
2
3
| <body>
<a name="top" id="top"></a>
<div><h3><a href="#top">Top</a></h3></div> |
That is all, you are done.