Creating a simple feedback button

by jonathan | Jul 29, 2009 at 9:00 am | Featured, tutorial, web design


A trend that has becoming more popular is having a floating feedback button on your home page so you can take advantage of your visitors opinion. The button can link to a form where the user can express their thoughts about the site or a page that allows them to vote on what features they would like to see on the site. You can mimic the feedback button for your own site with a some basic html and css.

Sneak a peek at the final product. (I hope you like the red, white and blue.)

After completing the example page I was surprise how easy this is to do. I will start out with a simple page that has a container which is centered on the page. Inside that I have a header, navigation area, content area and a footer.

<div id="container">
 <div id="header"><h2>Header Here</h2></div>
 <div id="nav">Simple Nav</div>
 <div id="content">
    <p>Words and paragraphs go here</p>
 <div id="footer"><h4>Footer</h4></div>

Nothing crazy here just some simple divs and the following CSS. I have added some lorem ispum to the content area in my example. I do not show it in the code to save space.

 body{font:.8em/1.6 Arial, Helvetica, sans-serif ; background:#CCC;}
 #container{width:800px; margin:0 auto; border:1px solid #666666;}
 #header,#content,#footer{margin:0; padding:20px;}
 #nav{background:#333333; color:white; padding:10px;}

Again some simple background colors so we can tell where each section is being displayed. The above makes something that looks like this.


The feedback button has text that runs vertically and I thought it would be easy to do with CSS or Javascript. However after some looking around I found a few complicated Javascript solutions that only work with specific fonts and a CSS solution that only works in IE. For ease of implementation  I find that you get a much better result if you create an image file for the text. I choose to create a simple PNG file with white letters and a slight drop shadow.


Here I show the feedback letters on different backgrounds for illustration purposes. I will use a png file where the background is transparent. This will allow for the maximum flexability. Now with the image made we can create the html and CSS needed. First lets create a div for the feedback image to be displayed in.

<div id="feedback"><a href"#"><img src="images/feedback.png" /></a></div>

I have made a div with an id of “feedback” and inside of that a hyperlink anchor tag and finally inside of that the feedback text image. This div can be placed any where on your page however I suggest that it goes toward the bottom. This will allow the more important things on your page to load first. Now for the CSS that will position this div in the correct spot.

#feedback a{ display:block; position:fixed; top:200px; right:-1px; background:green; padding:7px 5px;
 border:1px solid #030;
 #feedback a:hover{background:#030;border:1px solid #030;}

I started off with selecting the hyperlink anchor tag with in the div “feedback”.


Because the anchor tag is not a block level item we need to tell it to display as one. This will allow the positioning to work.
A fixed position will plant the feedback button in one location relative to the browser window.
top:200px; right:-1px;
Top places the feedback button exactly 200 pixels from the top of the window and right places button one pixel to the right off the window. This is done so that when a one pixel border is applied it doesn’t show on the right side.
This creates a green background for the feedback button. You can choose any color you like.
padding:7px 5px;
This creates a little padding around the image. This may or may not be necessary depending on your image.
border:1px solid #030;
Finally I created a dark green border around the feedback image. I have added other border colors to create a more three dimensional look.

The next selector uses the CSS pseudo hover class to create a rollover effect. The class changes the background to a darker green and applies the same color for the border.

I want to add that I probably didn’t need to have hyperlink anchor tag inside of a div tag. I could have selected the anchor by placing a class on it. I feel like the code is easier to read and skim when you have divs that outline what is going on. It is a matter of personal choice. It will work either way with a little CSS tweaking.

That is all there is to it. Let me know if you have any other web elements you would like to see explained or if you have any questions.

Feedback button example

30 responses to “Creating a simple feedback button”

  1. MediaFormations Articles » Creating a simple feedback button…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. madan says:

    this feedback button doesnt work on IE 6!

  3. Gavin says:


    This doesnt work on IE8 is there a another way of doing t


    but looks great on firefox great article

    • Jonathan says:

      On my system the button does work in IE8 if it is running in IE8 browser mode and document mode. If you have copied the code and it does not work for you in IE8 you might want to make sure that your page is being rendered in IE8 and not quirks mode. You can do this by pressing F12 or “Tools” -> “Developer Tools”.

  4. Philip says:

    Java is different than JavaScript. You are talking about JavaScript in this case. Might want to update that 🙂

  5. iCrusader says:

    Thanks for the tutorial, will try it out today.
    And Philip is right, you mentioned “Java” however we are talking about he Javascript here.

  6. Jonathan says:

    I appreciate the feedback and comments. You both are correct and I have changed the mentions of Java to Javascript. Thank you.

  7. […] to the div. Look here for a tutorial: Slide-Out Feedback Button for the Side of a Webpage or: Creating a simple feedback button | MediaFormations […]

  8. Thorsten says:

    Great, thanks a lot. I was looking for that a long time. Now our technics can integrate it in our website

  9. Drew says:

    Anyone now how to get this fixed in IE so it works in “Quirks Mode”? I believe this is the default most people have, so it would be good if it worked in that.

    Looks beautiful in Firefox..

  10. Ashish says:


    that was good work. but i got problem in IE6. can you please provide me any solutions for IE6

  11. I thought PNG transparency does not work in IE? Right? I love PNG but PNG no love IE 🙂

  12. Navin says:

    Thanks for taking the time to write this up. I found it very useful.

  13. […] This entry was posted in BetaRabbit. Bookmark the permalink. ← Bortskänkes Järna – Beta upplagd […]

  14. FYI in your sample code for the feedback div/link/image, you are missing the = in href=”#”.

  15. […] good tutorial on how the html/css was created for this post can be found here. No Comments » Click here to cancel […]

  16. Leonard Reidy says:

    Brilliant! Clean, concise effective solution. You should see the junk I had to sit through before I found your page. Many thanks!!!

  17. George Handorf says:

    Great! Now if I could just get it to work in conjuction with my fixed position header and footer I would be sailin’! If anyone has an easy solution to putting this togethor with a fixed position header/footer layout that is both Chrome AND IE friendly it would be great!

    And dude, you need a DONATE sticky on your page so I can buy you a beer!

  18. Krishna dlb says:

    This is perfect solution for me.. i liked it 

    Check –

  19. can u tell me how to put that in a joomla 2.5 based website?

  20. Sujan Gokhale says:

    Hey friend, its working…..Thanks for the code provided!!

  21. ewewr says:


  22. dpowell says:

    Thanks for sharing! If you are interested in good user feedback tool you should definitely check bugrem.

  23. Mark Zalman says:

    I tried tool, works great!

  24. jeremy porkes says:

    Thanks for taking the time to write this up. I found it very useful.butt i think bugram is also a simple tool for feed back and this tool works on every browser

  25. jeremy porkes says: add this tool in your site for feedback

Leave a Reply