XF 2.2 Button CSS/LESS emojis disappear in xf:button with gradient on hover tag

[Ferdinand]

Hi, I am having an issue when I set a button to have a hover gradient with an emoji with the text in the button tag. The emoji disappears after the hover has applied. I think I am just missing an !important; tag somewhere.

Does anyone know if there is a solution to this. You can test on our live site atomicacademia.com or the code is below:

// ############################ BUTTONS #################

.button,
a.button // needed for specificity over a:link
{
.m-buttonBase();

a
{
color: inherit;
text-decoration: none;
}

.xf-buttonDefault();

&.button--primary
{
.xf-buttonPrimary();
}

&.button--cta
{
.xf-buttonCta();
}

&.button--link
{
// block colors
background: @xf-contentBg;
color: @xf-linkColor;
border: @xf-borderSize solid @xf-borderColor;

&:hover,
&:active,
&:focus
{
text-decoration: none;
background: @xf-contentHighlightBg;
color: @xf-contentHighlightBase--color;
}
}

&.button--plain
{
background: none;
color: @xf-linkColor;
border: none;

&:hover,
&:active,
&:focus
{
text-decoration: none;
background: none;
}
}

&.button--alt
{
// block colors
background-color: @xf-paletteColor1;
color: @xf-linkColor;
.m-buttonBorderColorVariation(@xf-paletteColor2);

&:hover,
&:active,
&:focus
{
background-color: @xf-paletteColor1;
color: @xf-linkColor;
}
}

&.button--longText
{
.m-overflowEllipsis();
max-width: 100%;
display: inline-block;
}

&.is-disabled
{
.xf-buttonDisabled();

&:hover,
&:active,
&:focus
{
background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
}
}

&.is-hidden
{
display: none;
}

&.button--scroll
{
background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 65%);
padding: 8px 12px;
}

&.button--normal
{
font-size: @xf-fontSizeNormal;
}

&.button--small
{
font-size: @xf-fontSizeSmall;
padding: 3px 6px;
}

&.button--smaller
{
font-size: @xf-fontSizeSmaller;
padding: 2px 5px;
}

&.button--fullWidth
{
display: block;
width: 100%;
}

&.button--adminStyleAsset
{
&.is-disabled
{
visibility: hidden;
}

&.is-modify
{
.m-buttonIcon(@fa-var-pencil);
}

&.is-revert
{
.m-buttonIcon(@fa-var-history);
}
}

&.button--wrap
{
white-space: normal;
}

&.button--icon
{

.button-text:before,

.button-icon
{
.m-faBase();
}

.button-text:before,
.fa--xf:before,

.button-icon
{
font-size: 120%;
vertical-align: -.1em;
display: inline-block;
margin: -.255em 6px -.255em 0;
}

.fa--xf

{
// helps fix a button alignment issue (Chrome only)
line-height: inherit;
}

.button-icon
{
height: 1em;
vertical-align: 0;
}

&.button--iconOnly
{

.button-text:before,
i.fa--xf:before,

.button-icon
{
margin-left: 0;
margin-right: 0;
}
}

&.button--padded
{

.button-text:before,
i.fa--xf:before,

.button-icon
{
margin-top: 0;
margin-bottom: 0;
}
}

&--add { .m-buttonIcon(@fa-var-plus-square, .88em); }
&--confirm { .m-buttonIcon(@fa-var-check, 1em); }
&--write { .m-buttonIcon(@fa-var-edit, 1.13em); }
&--import { .m-buttonIcon(@fa-var-upload, 1.13em); }
&--export { .m-buttonIcon(@fa-var-download, 1.13em); }
&--download { .m-buttonIcon(@fa-var-download, 1.13em); }
&--redirect { .m-buttonIcon(@fa-var-external-link, 1em); }
&--disable { .m-buttonIcon(@fa-var-power-off, 1em); }
&--edit { .m-buttonIcon(@fa-var-edit, 1.13em); }
&--save { .m-buttonIcon(@fa-var-save, .88em); }
&--reply { .m-buttonIcon(@fa-var-reply, 1.13em); }
&--quote { .m-buttonIcon(@fa-var-quote-left, 1.13em); }
&--purchase { .m-buttonIcon(@fa-var-credit-card, 1.13em); }
&--payment { .m-buttonIcon(@fa-var-credit-card, 1.13em); }
&--convert { .m-buttonIcon(@fa-var-bolt, .75em); }
&--search { .m-buttonIcon(@fa-var-search, 1em); }
&--sort { .m-buttonIcon(@fa-var-sort, .63em); }
&--upload { .m-buttonIcon(@fa-var-upload, 1.13em); }
&--attach { .m-buttonIcon(@fa-var-paperclip, 1em); }
&--login {
.m-buttonIcon(@fa-var-lock, .88em);
}
&--rate { .m-buttonIcon(@fa-var-star, 1.13em); }
&--config { .m-buttonIcon(@fa-var-cog, 1em); }
&--refresh { .m-buttonIcon(@fa-var-sync-alt, 1em); }
&--translate { .m-buttonIcon(@fa-var-globe, .97em); }
&--vote { .m-buttonIcon(@fa-var-check-circle, 1em); }
&--result { .m-buttonIcon(@fa-var-chart-bar, 1em); }
&--history { .m-buttonIcon(@fa-var-history, 1em); }
&--cancel { .m-buttonIcon(@fa-var-ban, 1em); }
&--close { .m-buttonIcon(@fa-var-times, .69em); }
&--preview { .m-buttonIcon(@fa-var-eye, 1.13em); }
&--conversation { .m-buttonIcon(@fa-var-comments, 1.13em); }
&--bolt { .m-buttonIcon(@fa-var-bolt, .75em); }
&--list { .m-buttonIcon(@fa-var-list, 1em); }
&--prev { .m-buttonIcon(@fa-var-chevron-left, .63em); }
&--next { .m-buttonIcon(@fa-var-chevron-right, .63em); }
&--markRead { .m-buttonIcon(@fa-var-check-square, .88em); }
&--user { .m-buttonIcon(@fa-var-user, .88em); }
&--userCircle { .m-buttonIcon(@fa-var-user-circle, .97em); }

&--notificationsOn { .m-buttonIcon(@fa-var-bell, 1.25em); } // actually only .88em, but as we use this as a toggle, make it the same width as bell-slash
&--notificationsOff { .m-buttonIcon(@fa-var-bell-slash, 1.25em); }

&--show { .m-buttonIcon(@fa-var-eye, 1.25em) } // actually only 1.13em, but it's a toggle
&--hide { .m-buttonIcon(@fa-var-eye-slash, 1.25em) }

// for inline mod confirmations
&--merge { .m-buttonIcon(@fa-var-compress, .88em); }
&--move { .m-buttonIcon(@fa-var-share, 1.13em); }
&--copy { .m-buttonIcon(@fa-var-copy, .88em); }
&--approve, &--unapprove { .m-buttonIcon(@fa-var-shield, 1em); }
&--delete, &--undelete { .m-buttonIcon(@fa-var-trash-alt, .88em); }
&--stick, &--unstick { .m-buttonIcon(@fa-var-thumbtack, .75em); }
&--lock { .m-buttonIcon(@fa-var-lock, .88em); }
&--unlock { .m-buttonIcon(@fa-var-unlock, .88em); }

&--bookmark
{
.m-buttonIcon(@fa-var-bookmark);

&.is-bookmarked .button-text:before
{
font-weight: @faWeight-solid;
color: @xf-textColorAttention;
}
}
}

&.button--provider
{

.button-text:before,

.button-icon
{
.m-faBase('Brands');
font-size: 120%;
vertical-align: middle;
display: inline-block;
margin: -4px 6px -4px 0;
}

.button-icon
{
height: 1em;
vertical-align: 0;
}

&--facebook
{
.m-buttonColorVariation(#3B5998, white);
.m-buttonIcon(@fa-var-facebook, 1em);
}

&--twitter
{
.m-buttonColorVariation(#1DA1F3, white);
.m-buttonIcon(@fa-var-twitter, 1em);
}

&--google
{
.m-buttonColorVariation(white, #444);
border-color: #e9e9e9;

.button-text:before

{
display: none;
}
}

&--github
{
.m-buttonColorVariation(#666666, white);
.m-buttonIcon(@fa-var-github, .97em);
}

&--linkedin
{
.m-buttonColorVariation(#0077b5, white);
.m-buttonIcon(@fa-var-linkedin, .88em);
}

&--microsoft
{
.m-buttonColorVariation(#00bcf2, white);
.m-buttonIcon(@fa-var-windows, .88em);
}

&--yahoo
{
.m-buttonColorVariation(#410093, white);
.m-buttonIcon(@fa-var-yahoo, .88em);
}
}

&.button--splitTrigger
{
// button-text and button-menu are always children of button--splitTrigger
// but are defined here for reasons of specificity, as these border colors
// are overwritten by .m-buttonBorderColorVariation()

.button-text { border-right: @xf-borderSize solid transparent; }
.button-menu { border-left: @xf-borderSize solid transparent; }

.m-clearFix();
padding: 0;
font-size: 0;
display: inline-block;

button.button-text
{
background: transparent;
border: none;
border-right: @xf-borderSize solid transparent;
color: inherit;
}

.button-text,
.button-menu

{
.xf-buttonBase();
display: inline-block;

&:hover
{
&:after
{
opacity: 1;
}
}
}

.button-text

{
.m-borderRightRadius(0);
}

.button-menu

{
.m-borderLeftRadius(0);
padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);

&:after
{
.m-menuGadget(); // .58em
opacity: .5;
}
}
}
}

.buttonGroup
{
display: inline-block;
vertical-align: top;
.m-clearFix();

&.buttonGroup--aligned
{
vertical-align: middle;
}

.button

{
float: left;

&:notfirst-child)
{
border-left: none;
}

&:notfirst-child):notlast-child)
{
border-radius: 0;
}

&:first-child:notlast-child)
{
.m-borderRightRadius(0);
}

&:last-child:notfirst-child)
{
.m-borderLeftRadius(0);
}
}

.buttonGroup-buttonWrapper

{
float: left;

&:notfirst-child) > .button
{
border-left: none;
}

&:notfirst-child):notlast-child) > .button
{
border-radius: 0;
}

&:first-child:notlast-child) > .button
{
.m-borderRightRadius(0);
}

&:last-child:notfirst-child) > .button
{
.m-borderLeftRadius(0);
}
}
}

.toggleButton
{

input

{
display: none;
}

span

{
.xf-buttonDisabled();
.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
}

&.toggleButton--small > span
{
font-size: @xf-fontSizeSmaller;
padding: @xf-paddingSmall;
}

input:checked + span

{
.xf-buttonDefault();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
}
}

.u-scrollButtons
{
position: fixed;
bottom: 30px;
right: (@xf-pageEdgeSpacer) / 2;

.has-hiddenscroll &
{
right: 20px;
}

z-index: @zIndex-9;

.m-transition(opacity; @xf-animationSpeed);
opacity: 0;
display: none;

&.is-transitioning
{
display: block;
}

&.is-active
{
display: block;
opacity: 1;
}

.button
{
display: block;

+ .button
{
margin-top: (@xf-pageEdgeSpacer) / 2;
}
}
}
.u-navButtons
{
position: fixed;
bottom: 30px;
left: (@xf-pageEdgeSpacer) / 2;

.has-hiddenscroll &
{
left: 20px;
}

z-index: @zIndex-9;

.m-transition(opacity; @xf-animationSpeed);
opacity: 0;
display: none;

&.is-transitioning
{
display: block;
}

&.is-active
{
display: block;
opacity: 1;
}

.button
{
display: block;

+ .button
{
margin-top: (@xf-pageEdgeSpacer) / 2;
}
}
}

 

[stellaethra]

I believe a better solution may exist, but I will suggest a simple method.

To solve the issue, you can put the emoji and text in different elements.

---

Instructions

The following is a sample code block from your site:

<a
  href="pages/OpenAI/"
  class="button"
  title="Artificial Intelligence on Atomic Academia ⚛️"
>
  <span class="button-text">🖲️ AI</span>
</a>

Put them in different elements and the final code should look like this:

<a
  href="pages/OpenAI/"
  class="button"
  title="Artificial Intelligence on Atomic Academia ⚛️"
>
  <span class="button-text-emoji">🖲️</span>
  <span class="button-text">AI</span>
</a>

Now add the following code to your related CSS/LESS template:

.button-text-emoji {
  margin-right: 4px;
}

Let me know if there are any problems.

---

Edit:

The title says that you are using the <xf:button> element, I didn't see this when I was writing the original message.

Nevertheless, this does not change the solution, it will be fine to replace the <a> elements with your matching <xf:button> elements.

The important thing is the content of the element.

 

[Ferdinand]

I believe a better solution may exist, but I will suggest a simple method.

To solve the issue, you can put the emoji and text in different elements.

---

Instructions

The following is a sample code block from your site:

<a
  href="pages/OpenAI/"
  class="button"
  title="Artificial Intelligence on Atomic Academia ⚛️"
>
  <span class="button-text">🖲️ AI</span>
</a>

Put them in different elements and the final code should look like this:

<a
  href="pages/OpenAI/"
  class="button"
  title="Artificial Intelligence on Atomic Academia ⚛️"
>
  <span class="button-text-emoji">🖲️</span>
  <span class="button-text">AI</span>
</a>

Now add the following code to your related CSS/LESS template:

.button-text-emoji {
  margin-right: 4px;
}

Let me know if there are any problems.

---

Edit:

The title says that you are using the <xf:button> element, I didn't see this when I was writing the original message.

Nevertheless, this does not change the solution, it will be fine to replace the <a> elements with your matching <xf:button> elements.

The important thing is the content of the element.

Thank you so much, when using xf:button the emoji would still encounter the same problem however putting the text into the button text element and using html a class works perfectly and maintains the hover gradient. You're awesome!

 

[stellaethra]

Thank you so much, when using xf:button the emoji would still encounter the same problem however putting the text into the button text element and using html a class works perfectly and maintains the hover gradient. You're awesome!

I see, we can fix that too.

If you want to use the <xf:button> element but not the <a> element, change your code structure as follows:

<xf:button class="button">
  <span class="button-text-emoji">🖲️</span>
  <span class="button-text-content">AI</span>
</xf:button>

Of course, you can modify the attributes of the button element, this is just an example.

Next, make the following small edit to the CSS code you use to give gradient to the text:

.button:not(.bbCodeSpoiler-button):hover .button-text-content,
a.button:not(.bbCodeSpoiler-button):hover .button-text-content {
  background: linear-gradient(to right, #328af1, #21c8f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

We add -content to the end of the .button-text classes.

This will also create a space between the emoji and the text, so you can remove the CSS code I gave you in the message above.

And that's it, now everything should be working perfectly.

Let me know if there are any problems.