CODEWITHSUNDEEP
cssbackgroundgradient
JiaCheng Zhang
JiaCheng Zhang

Reputation: 9

How can I put a gradient in a text of a button with css without affecting the background?

Im trying to make a button with white background and the text with a gradient.

    &.bricks-background-light {
    position: relative;
    display: inline-block;
    padding: 16px 24px;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
    overflow: hidden;

    font-size: inherit;
    color: transparent;
    background: linear-gradient(90deg, #E8125C, #375D9F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;

}

&.bricks-background-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    z-index: -1 !important;
}

This is the style i have right now, but it only shows a white background without the gradient in the text.

Upvotes: 0

Views: 54

Answers (1)

Patrick Janser
Patrick Janser

Reputation: 4273

The background image (which is clipped by the text itself) will be seen if the text color is set to transparent. The white background color is behind the background image and, effectively, as you said, it has to be put inside a pseudo-element. I used the ::before pseudo-element because I assume it is drawn "before" the content of the button itself.

I also replaced your padding and border radius units by em instead of px. This makes the button kind of "elastic" if you change the main font size.

I moved a few values to CSS variables to make it easier to change. You'll probably have that in SASS variables (but I can't do that in stackoverflow snippets).

:root {
  --page-bg-color: #f8f8f8;
  --text-color: #444;
  --bricks-light-bg-color: white;
  --bricks-light-active-bg-color: #faeaf7;
  --bricks-light-text-gradient: linear-gradient(90deg, #E8125C, #375D9F);
}

html {
  font: 16px/1.4 Arial, sans-serif;
  background: var(--page-bg-color);
  color: var(--text-color);
}

button.bricks-light {
    display: inline-block;
    /* Show that one can click on it. */
    cursor: pointer;
    /* Use em unit so that it's elastic with the font size of the page. */
    padding: .8em 1.2em;
    /* Override border style to be the same everywhere (Firefox was different). */
    border: 2px solid var(--text-color);
    border-radius: .6em;
    text-align: center;
    /* To be sure the white background of the pseudo-element doesn't show out of the button. */
    overflow: hidden;
    /* For the pseudo-element in absolute. */
    position: relative;
    /* Don't use the default's button font size, but inherit it from the page. */
    font-size: inherit;
    /* Create the linear-gradient image and clip it with the text. */
    background-image: var(--bricks-light-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    /* Set the text as transparent so that we see the background image. */
    color: transparent;
    /* The white background will be put in the pseudo element just below. */
}

/* The pseudo-element for the white background behind the gradient background. */
button.bricks-light::before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background: var(--bricks-light-bg-color);
    z-index: -1;
}

/* When the user clicks on the button. */
button.bricks-light:active::before {
    background: var(--bricks-light-active-bg-color);
}
<p>This is a button: 
  <button class="bricks-light">Nice gradient</button>
</p>

Upvotes: 0

Related Questions