CODEWITHSUNDEEP
htmlcss
user1241241
user1241241

Reputation: 674

Missing vendor-prefixed CSS gradients for Old Webkit on using custom button

Following is the css that I'm using to show a button.

.btn {
   background: #3D94F6;
   background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #FFFFFF;
   font-family: Arial;
   font-size: 20px;
   font-weight: 100;
   padding: 40px;
   box-shadow: 1px 1px 20px 0px #000000;
   -webkit-box-shadow: 1px 1px 20px 0px #000000;
   -moz-box-shadow: 1px 1px 20px 0px #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #337FED 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.btn:hover {
   border: solid #2BC4AD 1px;
   background: #1E62D0;
   background-image: -webkit-linear-gradient(top, #1E62D0, #30E3CB);
   background-image: -moz-linear-gradient(top, #1E62D0, #30E3CB);
   background-image: -ms-linear-gradient(top, #1E62D0, #30E3CB);
   background-image: -o-linear-gradient(top, #1E62D0, #30E3CB);
   background-image: linear-gradient(to bottom, #1E62D0, #30E3CB);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-decoration: none;
}

Unfortunately, CSS lint throws a bunch of error such as " character 1Missing vendor-prefixed CSS gradients for Old Webkit (Safari 4+, Chrome), Standard property 'box-shadow' should come after vendor-prefixed property '-moz-box-shadow'., Values of 0 shouldn't have units specified."

also, the button is not visible. why?

Upvotes: 1

Views: 2453

Answers (2)

whigglets
whigglets

Reputation: 21

I've used this button code in my Atom software with the Linter enabled, which shows me the same error code when I save the stylesheet. The solution I found was to delete all the text that tells specific browsers what to do. Anything with "webkit" or "moz" ect. Here's a copy of the clean "error free" version of the code:

.btn {
  background: #11cdd4;
  background-image: linear-gradient(top, #11cdd4, #11999e);
  background-image: linear-gradient(to bottom, #11cdd4, #11999e);
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #30e3cb;
  background-image: linear-gradient(top, #30e3cb, #2bc4ad);
  background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
  text-decoration: none;
}

A little bit of playing around and that's what I was able to come up with. I think the text editor was just calling out all the duplicate information as unnecessary.

Upvotes: 2

pranishkhadgi
pranishkhadgi

Reputation: 26

I am also currently having the same error.

as for the visibility of button, this code seems to work.

.btn {
  background: #11CDD4;
  background-image: -webkit-linear-gradient(top, #11CDD3, #11999E);
  background-image: -moz-linear-gradient(top, #11CDD4, #11999E);
  background-image: -ms-linear-gradient(top, #11CDD4, #11999E);
  background-image: -o-linear-gradient(top, #11CDD4, #11999E);
  background-image: linear-gradient(to bottom, #11CDD4, #11999E);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #30E3CB;
  background-image: -webkit-linear-gradient(top, #30E3CB, #2BC4AD);
  background-image: -moz-linear-gradient(top, #30E3CB, #2BC4AD);
  background-image: -ms-linear-gradient(top, #30E3CB, #2BC4AD);
  background-image: -o-linear-gradient(top, #30E3CB, #2BC4AD);
  background-image: linear-gradient(top, #30E3CB, #2BC4AD);
  text-decoration: none;
}

Upvotes: 1

Related Questions