How to add fixed button to the bottom right of page

34

I'm having some trouble adding a fixed button on the bottom of my webpage. Been testing out different numbers with the pixels, but the button hasn't been showing underneath the page on the right.

HTML

<a href="#head"><img src="upbutton.png" id="fixedbutton"></a>

CSS

.fixedbutton {
    position: fixed;
    bottom: 560px;
    right: 1000px; 
}

This question is tagged with html css button uibutton

~ Asked on 2013-10-04 18:23:06

The Best Answer is


81

You are specifying .fixedbutton in your CSS (a class) and specifying the id on the element itself.

Change your CSS to the following, which will select the id fixedbutton

#fixedbutton {
    position: fixed;
    bottom: 0px;
    right: 0px; 
}

Here's a jsFiddle courtesy of JoshC.

~ Answered on 2013-10-04 18:25:00


0

This will be helpful for the right bottom rounded button

HTML :

      <a class="fixedButton" href>
         <div class="roundedFixedBtn"><i class="fa fa-phone"></i></div>
      </a>
    

CSS:

       .fixedButton{
            position: fixed;
            bottom: 0px;
            right: 0px; 
            padding: 20px;
        }
        .roundedFixedBtn{
          height: 60px;
          line-height: 80px;  
          width: 60px;  
          font-size: 2em;
          font-weight: bold;
          border-radius: 50%;
          background-color: #4CAF50;
          color: white;
          text-align: center;
          cursor: pointer;
        }
    

Here is jsfiddle link http://jsfiddle.net/vpthcsx8/11/

~ Answered on 2021-02-21 13:51:13


Most Viewed Questions: