How to add fixed button to the bottom right of page

Question

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; 
}

You should be using `#fixedbutton` as a selector. – Oct 04 '13 at 18:24 — , Oct 04 '13 at 18:24

score 103 · Accepted Answer · edited Jan 09 '23 at 14:02

103

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.

edited Jan 09 '23 at 14:02

Zoe

27,060
21
118
148

answered Oct 04 '13 at 18:25

chopper

6,649
7
36
53

1

I actually named it td#fixedbutton, so now it appeared. But the button is not aligned to where I want it to be. – Brian Lam Oct 04 '13 at 18:36
1

Well, where do you want it? – chopper Oct 04 '13 at 18:49
Don't use a px postfix when you set it to zero. – kraken Sep 14 '16 at 05:58
this answer only for desktop devices, on mobile there is some issue. And i can't find any solution. – xoxn-- 1'w3k4n Nov 07 '16 at 09:15
1

This makes the button overlap the scrollbar in chrome v.62 – Josué Zatarain Oct 20 '17 at 14:51

mohamed shameem · Answer 2 · 2021-02-21T13:58:18.783

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/

score 1 · Answer 3 · answered Aug 04 '21 at 17:57

.bottomFixButtionComponent{
  position: sticky;
  bottom: 0px;
  padding-top: 10px;
  background: yellowgreen;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -4px 3px rgb(27 27 24 / 75%);
  }

      
       <h1> Bottom Fix component </h1>
      
        <div class="bottomFixButtionComponent"> 
          <button>Clear </button>
          <div>|</div>
          <button>Submit </button>
         </div>

score 1 · Answer 4 · answered Aug 04 '21 at 17:59

.bottomFixButtionComponent{
  position: fixed;
  bottom: 0px;
  padding-top: 10px;
  background: yellowgreen;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -4px 3px rgb(27 27 24 / 75%);
  }

<h1> Bottom Fix component </h1>
      
        <div class="bottomFixButtionComponent"> 
          <button>Clear </button>
          <div>|</div>
          <button>Submit </button>
         </div>

How to add fixed button to the bottom right of page

4 Answers4