I'm trying to make a button that has a linear gradient only in the text, but when I make the button it loses the backgroud, can anyone help me?
https://codepen.io/caiohaffs/pen/wvXWBOZ
button.default {
width: 154px;
height: 72px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
object-fit: contain;
border-style: solid;
border-width: 1px;
border-image-source: linear-gradient(65deg, #ff8d4d 0%, #6d37ff 100%);
border-image-slice: 1;
background-color: #000;
text-transform: uppercase;
color: #fff;
font-size: 16px;
line-height: 1.75;
letter-spacing: 1.28px;
font-weight: 500;
font-family: 'Roboto Condensed';
}
button.default:hover {
background: #FF8D4D;
background: linear-gradient(to right, #FF8D4D 0%, #6d37ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<button >Saiba Mais</button>
CodePudding user response:
Add a pseudo element to keep the background color #000
:
button.default {
width: 154px;
height: 72px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
object-fit: contain;
border-style: solid;
border-width: 1px;
border-image-source: linear-gradient(65deg, #ff8d4d 0%, #6d37ff 100%);
border-image-slice: 1;
background-color: #000;
text-transform: uppercase;
color: #fff;
font-size: 16px;
line-height: 1.75;
letter-spacing: 1.28px;
font-weight: 500;
font-family: 'Roboto Condensed';
/* ADDED LINE */
position: relative;
}
button.default:hover {
background: #FF8D4D;
background: linear-gradient(to right, #FF8D4D 0%, #6d37ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ADDED */
button.default::before {
content: '';
display: block;
position: absolute;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
<button >Saiba Mais</button>
The CSS sets the z-index: -1
to it displays below the parent element and also uses pointer-events: none
to avoid the element from interfering with the hover
event.
CodePudding user response:
You can use multiple background where you also need two background-clip
button.default {
width: 154px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 1px;
border-image-source: linear-gradient(65deg, #ff8d4d 0%, #6d37ff 100%);
border-image-slice: 1;
background:
linear-gradient(to right, #FF8D4D 0%, #6d37ff 100%),
#000;
-webkit-background-clip: text, padding-box;
background-clip: text, padding-box;
text-transform: uppercase;
color: #fff;
font-size: 16px;
line-height: 1.75;
letter-spacing: 1.28px;
font-weight: 500;
font-family: 'Roboto Condensed';
}
button.default:hover {
-webkit-text-fill-color: transparent;
}
<button >Saiba Mais</button>