Title: How to create a floating button?
Last modified: February 16, 2021

---

# How to create a floating button?

 *  [4vke](https://wordpress.org/support/users/4vke/)
 * (@4vke)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/)
 * Hello!
    I am using the [https://wordpress.org/plugins/wp-night-mode/](https://wordpress.org/plugins/wp-night-mode/)
   plugin and I want the toggle button to be always visible. Namely: in the lower
   right corner.
 * Please tell me how can I do this?
 * I know that I can put this button in the menu or header, but then it looks very
   bad on mobile devices.
 * Thx!
    -  This topic was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14057810)
 * Hi there,
 * can you share a link to your site where i can see the toggle – we may be able
   to provide some CSS for what you require.
 *  Thread Starter [4vke](https://wordpress.org/support/users/4vke/)
 * (@4vke)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058203)
 * [@diggeddy](https://wordpress.org/support/users/diggeddy/) thanks for responding.
 * Do not pay attention to the fact that everything is crooked there 🙂
    This is
   normal. This is a test site: [http://kpoisk.hostenko.net/](http://kpoisk.hostenko.net/)
 * The most important thing for me is to add a button to the right or left. So that
   she is always in sight:
    [https://prnt.sc/zqp3am](https://prnt.sc/zqp3am)
 * I need to move this button from the menu to the bottom corner (right or left):
   
   [https://prnt.sc/zqsb0b](https://prnt.sc/zqsb0b)
 * p.s. i use this plugin (documentation): [https://github.com/markoarula/wp-night-mode](https://github.com/markoarula/wp-night-mode)
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058538)
 * That plugin provides a shortcode:
 * `[wp-night-mode-button]`
 * Add it to your use site using a Hook function.
 *     ```
       add_action('generate_after_footer', function() {
           echo do_shortcode( '[wp-night-mode-button]' );
       });
       ```
   
 * This will place it below the content of the page, once its there i can see what
   HTML it uses and provide some CSS to position it.
 *  Thread Starter [4vke](https://wordpress.org/support/users/4vke/)
 * (@4vke)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058671)
 * [@diggeddy](https://wordpress.org/support/users/diggeddy/) done.
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058688)
 * Sorry was meant to say how to add the Code – see here:
 * [https://docs.generatepress.com/article/adding-php/](https://docs.generatepress.com/article/adding-php/)
 *  Thread Starter [4vke](https://wordpress.org/support/users/4vke/)
 * (@4vke)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058713)
 * [@diggeddy](https://wordpress.org/support/users/diggeddy/) Do not worry. I used(
   only) the shortcode and everything works.
    [https://prnt.sc/zqxmzf](https://prnt.sc/zqxmzf)
   [https://prnt.sc/zqxr1l](https://prnt.sc/zqxr1l)
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058756)
 * You can add this CSS to fix its position:
 *     ```
       .wpnm-button.style-1 {
         position: fixed;
         top: unset;
         bottom: 60px;
         right: 60px;
       }
       ```
   
 *  Thread Starter [4vke](https://wordpress.org/support/users/4vke/)
 * (@4vke)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14058789)
 * [@diggeddy](https://wordpress.org/support/users/diggeddy/) nice!
    Thank you so
   much. This is what I needed. You are the best! 🙂
 * **UPDATE**:
    I hope you haven’t left yet. Do you know why, in the mobile version
   the button disappears inside posts? There is no such problem with the PC version.**
   FIXED** 🙂
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
    -  This reply was modified 5 years, 5 months ago by [4vke](https://wordpress.org/support/users/4vke/).
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14059943)
 * You’re welcome

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘How to create a floating button?’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [David](https://wordpress.org/support/users/diggeddy/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/how-to-create-a-floating-button/#post-14059943)
 * Status: not resolved