Regular visitors of Digimantra might have noticed that recently we introduced “Suggest a post” button on the left side of the webpage. Some one anonymously sent a request to write a post on how to create these sort of fixed buttons on the website. This is very simple, yet look very nice tagged along the site.

So let us start by creating those rounded corner images. You can read this post on how to create gradient buttons ,so as to make your own in the photoshop.If you do not want to create your own image, you can use the one I created.

suggest-post

Did you notice we have this image with similar text but their background color is different. This is where we are going to use these colors for the mouseover effect. I have also given a 1px difference in the text position so as to give a little shift when mouse hovers over the button. You might have noticed that.

Now the HTML and CSS to achieve this is as follows  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      *{margin:0px;padding:0px;}
      #suggestPost
      {
        background:transparent url(suggest-post.png) no-repeat scroll 0px 0px;
        height:170px;
        left:0;
        position:fixed;
        top:150px;
        width:40px;
      }
      div#suggestPost:hover
      {
        background-position:-41px 0px;
      }
      #suggestPost a
      {
        display:block;
        height:170px;
        width:40px;
      }
    </style>
  </head>
  <body>
    <div id="suggestPost"><a href="#" ></a></div>
  </body>
</html>

Some facts about the above lines of code

  • You can position this by changing the value of top:150px. This changes the position of the button from top of the browser.
  • The CSS property position:fixed; make this button sticky no matter even if the user scrolls it up or down.
  • The hover effect is the result of the  pseudo CSS property :hover which we have used in div#suggestPost:hover and we have changed the background-position of the image, which gives the effect.
  • Do not forget to add a valid DOCTYPE in the HTML file, otherwise Internet Explorer is clever enough to behave erroneous.

Hope you like this post.

Stay Digified!!
Sachin Khosla.

Share this post:

Related posts:

Default ThumbnailWhat’s difference between display: none and visibility: hidden? Default ThumbnailHow to inspect css hover , active property using firebug Default ThumbnailChange a CSS class dynamically using Javascript Default ThumbnailRounded corners in firefox and safari using css3