Change colors of background-image gradient from code behind

I am creating a login button like this:

<%-- login.aspx --%>
<asp:Button runat="server" ID="btnLogin" OnClick="ButtonLoginClick" Text="Anmelden" CssClass="btn" />

/* CSS */
.btn {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    outline: none;
    border: none;
    background-image: linear-gradient(to right, #003b67, #0067b4, #003b67);
    background-size: 200%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin: 1rem 0;
    cursor: pointer;
    transition: .5s;
}


.btn:hover {
    background-position: right;
}

the result looks like this:

now, I am trying to change the colors of the gradient from code behind.
for example changing the text color just works fine

btnLogin.Style.Add("color", "#000");

changing the complete style also works like this:

btnLogin.Attributes.Add("style", "background-image: linear-gradient(to right, #ff0000, #ff0000, #ff0000)");

but then, only the background-image is set and all other style attributes are gone, for example the textcolor I set before.

So how can I only change background-image but keep all other attributes?

EDIT:

btnLogin.Style["color"] = "#000";               // works
btnLogin.Style["background-image"] = "linear-gradient(to right, #ff0000, #ff0000, #ff0000)";    // doesn't work

EDIT 2:

Error says: invalid property value

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It seems like asp.net escapes/embeds the background-image-style always in urls – that’s why this is not working:

btnLogin.Style["background-image"] = "linear-gradient(to right, #ff0000, #ff0000, #ff0000)";

What you can do is use background instead. It’s a workaround for your case – but keep in mind, that background sets all properties of background at once, so e.g. your background-size: 200% needs to be set, if you really need it:

btnLogin.Style["background"] = "linear-gradient(to right, #ff0000, #ff0000, #ff0000)";

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating