CODEWITHSUNDEEP
cssreactjs
Matthew
Matthew

Reputation: 63

Linear Gradient CSS Not Working in ReactJS

I am trying to create a linear gradient css style for a button and for some reason it's not working. I think it may be a react issue, not really sure.

Code:

import React from "react";

var bg = {
  background: "#FFFFFF"
}

var btnFill = {
  background: 'linear-gradient(to right, #E040FB, #00BCD4)'
}


class ConsolePage extends React.Component {

  render() {
    return <div style={bg}>
      <div class="uk-sticky-placeholder"></div>
        <div class="uk-width-1-1">
          <div className="uk-grid">
            <div className="uk-margin-left uk-margin-top uk-margin-bottom uk-width-1-3@m">
              <div className="uk-margin-xlarge-top">
                    <div className="my-3" align="center">
                    <h3 className="mb-1">placeholder text</h3>
                        <div className="uk-grid">
                          <div>
                            <button href="/docs">
                              Learn More
                              <div className="btn"></div>
                            </button>
                          </div>
                          <div>
                            <button href="/tracker/nwa/lab/add">
                              Let's get started!
                              <div className="" style={btnFill}></div>
                            </button>
                          </div>
                        </div>
                    </div> 
                </div>
            </div>


          </div>

              </div>
      </div>
  }
}

export default ConsolePage;

It just renders as a button that has no styles to it. If I leave out the ''s like so: 

var btnFill = {
  background: linear-gradient(to right, #E040FB, #00BCD4)
}

react says this: Unexpected token, expected "," between to right.

Regards

Upvotes: 0

Views: 10633

Answers (2)

Gabriel Vasile
Gabriel Vasile

Reputation: 2348

You can't put a div inside a button, but you can put an image.

<img src="...." />

Or instead of a button, you can use a link

const btnFill = {
  backgroundImage: 'linear-gradient(to right, #E040FB, #00BCD4)';
}
<a style={btnFill} href="/tracker/nwa/lab/add">Let's get started!</a>

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9769

Try this, it's working

const mystyle={
  background: 'linear-gradient(to right, #430089, #82ffa1)'
}

<div style={mystyle}>
    Linear Gradient
</div>

It seems you have not used text or something inside your div to which you are applying styling.

Upvotes: 2

Related Questions