XenForo Hover Effect for action Bar

[ThanosCrax]

ThanosCrax submitted a new resource:

Hover Effect for action Bar - Hover affects for icons of action bar

Add to extra.less

/*Action Bar*/
    .actionBar-action, .reaction-text
    {
        font-size: 0;
        .m-transition();
        &:before
        {
            font-size: @xf-fontSizeNormal;
            margin-right: 5px;
        }
        &--inlineMod, &--menuTrigger, &--reaction, &:hover, &:hover .reaction-text
        {
            font-size: 100%;
            text-decoration:none;
        }
   
        &--edit { .m-faBefore(@fa-var-pencil); }...

Read more about this resource...

 

[El Profesor]

ThanosCrax submitted a new resource:

Hover Effect for action Bar - Hover affects for icons of action bar



Read more about this resource...

How can I get the icons to come out ...

 

[ThanosCrax]

How can I get the icons to come out ...

hover

 

[Sophia55]

To add a hover effect to the action bar in XenForo, use this CSS:

1. Go to Appearance > Style Properties > Extra.css.
2. Add:

.actionBar .button:hover {
background-color: #ff9900; /* Hover color */
color: #fff; /* Text color */
transition: background-color 0.3s ease;
}


This changes the button's color on hover. Adjust as needed!