Rainbow Gradient Animation for Start Discussion button

[deleted]

OrdinaryJellyfish maybe make it optional?

Mossy

Hey, this looks very nice good job! But is it possible to show this animation on a particular site? For example on the start page but not "in" a tag.

clarkwinkelmann

Mossy possibilities are limited, but here's something I just tried.

If you replace the button.IndexPage-newDiscussion selector with button.IndexPage-newDiscussion:not([style]), the effect will only apply to the new discussion button when it has no direct CSS applied. That would mean under any tag that has a color, the color of the tag will stay instead of the gradient.

I don't think that more is possible without injecting more classes via an extension.

EDIT: it's actually possible to use the presence or absence of a hero banner above to detect which page is shown. For example the following disables the gradient on all tag pages: (though it needs some tinkering, as it's making the button transparent ? )

.TagHero + .container .IndexPage-newDiscussion {
    background-image: none;
}

Pollux

Mossy But is it possible to show this animation on a particular site? For example on the start page but not "in" a tag.

The button has the same classes (Button Button--primary IndexPage-newDiscussion hasIcon) on all the pages (index view and tag view). But further up the cascade of DOM elements there are differences: The index view has a div with only the class IndexPage whereas the tag views have an additional class of IndexPage--tagxx where xx is the internal number of the tag.

To target your button only on the tag view #7 you could write:

div.IndexPage--tag7 button.IndexPage-newDiscussion {
    ...
}

To target your button on any tag view you could write:

div[class*='IndexPage--tag'] button.IndexPage-newDiscussion {
    ...
}

To target your button only on the index view you could write:

div.IndexPage:not([class*='IndexPage--tag']) button.IndexPage-newDiscussion {
    ...
}

clarkwinkelmann

Pollux woops I missed that apparently ?

I think your last example will also apply to the "following" page in addition to the index.

Pollux

clarkwinkelmann

Yes, that's true.

lorem

Ralkage This looks to be very popular and definitely draws me to start a brand new discussion

On topic: Will look pretty on dark themes.

SpacellaGaming

GIF does not work.

User24

this is great, can i make this rainbow effect say for only admin's usernames?

Justoverclock

Where is possibile to see this live?

pupsik

Justoverclock just add this css to your custom CSS and vola, refresh your page and see it live.

PS. It does not work in mobile, or small screens.

« Previous Page