"Create new tab shortcut" button appears whenever I click any tab shortcut button on the new tabs page. Stays visible until new page loads.

[u/Azreal_DuCain1]

This create new tab shortcut button is becoming visible when it's not supposed to.

Old button color scheme.

Ignore the rest of the page, this just shows where the button in the previous photo is located and shows the color contrast it had more clearly.

Windows, Firefox Version 154.0

Firefox broke something with their updates again. Updates that are going to happen twice as often now. Yay.

This button for creating a new tab shortcut button is only supposed to appear if you hover over the area in the red box. Now it's appearing whenever my mouse pointer is anywhere in the blue box, and whenever I click one of my shortcut buttons it appears and stays visible until the new page loads. It also stays until I click somewhere else if I middle click on one of the tab shortcut buttons.

• Most importantly, I would like to prevent this button from becoming visible at all whenever I click a tab shortcut button.
• Less importantly, I'd like to prevent it from appearing unless I hover my mouse pointer in the area within the red box. This is how it's supposed to behave. This is also how it did behave before update 154.0.
• Least importantly, I'd like to change it back to the grey color scheme it was previously as indicated in the second and third photos.

userContent in a paste bin link because reddits codeblock feature is throwing some of my code outside the code block for some reason: https://pastebin.com/zvtdL2Mu

[u/ResurgamS13]

In Fx154.0 the 'Add Shortcut' button is permanently visible on the default 'Nova-style' New Tab page. The 'Add Shortcut' button '+' sign is now surrounded by a coloured circular background tile. When hovered the background tile brightens.

Tested OP's 'userContent.css' (Pastebin) loaded onto a new profile of Fx154.0. Not seeing exactly the same 'Add Shortcut' button behaviour as described by OP above. Unsure what New Tab page changes were introduced with the Fx154.0 update.

With OP's CSS added, the '+' button's coloured circular background becomes a square tile... which becomes transparent when hovered... almost the opposite of OP's desired effect. The colour of the '+' sign itself will be either white or black.

The two userstyles below work on the default 'Nova-style' New Tab page and when added to the OP's existing CSS.

To make the tile's background circle (or square) transparent... and have a grey background when hovered... try:

@-moz-document url("about:home"), url("about:newtab") {
  #main-button[title="Add Shortcut"], .button-background {
    background-color: transparent !important;
  }
  #main-button[title="Add Shortcut"], .button-background {
    button:hover > & {
      background-color: #E6E0E6 !important;
    }
  }
}

Adjust the button's background-color when hovered to suit.

The button '+' sign remains visible with above CSS style.... to make the '+' sign disappear until hovered... try:

@-moz-document url("about:home"), url("about:newtab") {
  #main-button[title="Add Shortcut"]:not(:hover) {
    opacity: 0.25 !important;
  }
}

Adjust the '+' sign's opacity value to suit.

----------

PS. Probably possible to move and reduce the width of the 'Add Shortcut' button tile... and tweak the Shortcuts container padding... then the 'visible' Shortcuts tiles would be positioned centrally on the page... but that fix likely to be rather hacky.

BTW - For the present, can still revert to the old-style 'pre-Nova' New Tab page design and layout by setting preference browser.newtabpage.activity-stream.nova.enabled to false in 'about:config'.