Change color of gradient button

• 

  mylesformby · Member · Apr 25, 2012 at 4:09 am

  • Copy link
  • Add topic to favorites

  Hi I’m trying to change the color of the gradient button but no colors I put in seem to change anything. I’ve isolated the button (I think) but nothing seems to work.
  Any ideas?
  http://pavementportraits.com
  This appears to be the code for the button:
  
input[type="submit"] {
background: -moz-linear-gradient(center top , #76AEE8, #2E6EB0) repeat scroll 0 0 transparent;
border: 1px solid #2E6EB0;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin: 0 2px;
padding: 5px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
}


  The blog I need help with is: (visible only to logged in users)

• 

  mylesformby · Member · Apr 25, 2012 at 4:15 am

  • Copy link

  ps I want to make the button a light grey gradient.

• 

  jackiedana · Member · Apr 25, 2012 at 4:29 am

  • Copy link

  You were close! If you have the custom design upgrade, you can add this to your CSS:

  input[type=”submit”]
  {
  background: -moz-linear-gradient(center top , #F2F2F2, #808080) repeat scroll 0pt 0pt transparent;
  }

  I picked some greys from the list at http://www.december.com/html/spec/color0.html, but you could substitute the two numbers that I changed (#F2F2F2, #808080) with any other greys on that list.

• 

  mylesformby · Member · Apr 25, 2012 at 4:43 am

  • Copy link

  Thanks, but that didn’t work. No colors I put in seem to change it.

• 

  joshidaniel · Member · Apr 25, 2012 at 6:22 am

  • Copy link

  try this:

  input[type=submit] {
background: #777;
border: solid 1px #777;
color: #fff;
cursor: hand;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin: 0 2px;
padding: 5px;
text-align: center;
text-shadow: 0 1px 1px #000;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
vertical-align: baseline;
}

• 

  designsimply · Member · Apr 25, 2012 at 2:36 pm

  • Copy link

  The code you first posted seems to have some properties missing. To see what I mean, open the Blaskan original stylesheet:
  https://s-ssl.wordpress.com/wp-content/themes/pub/blaskan/style.css?m=1333592456g&minify=false

  And look for the “input[type=submit]” rule.

  Here it is for reference:

  input[type=submit] {
  	background: #2e6eb0;
  	background: -moz-linear-gradient(top, #76aee8, #2e6eb0);
  	background: -o-linear-gradient(top, #76aee8, #2e6eb0);
  	background: -webkit-gradient(linear, left top, left bottom, from(#76aee8), to(#2e6eb0));
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76aee8', endColorstr='#2e6eb0' );
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#76aee8, endColorstr=#2e6eb0)";
  	border: solid 1px #2e6eb0;
  	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	border-radius: 6px;
  	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
  	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
  	box-shadow: 0 1px 2px #000;
  	box-shadow: 0 1px 2px rgba(0,0,0,.3);
  	color: #fff;
  	cursor: hand;
  	cursor: pointer;
  	display: inline-block;
  	font-weight: bold;
  	margin: 0 2px;
  	padding: 5px;
  	text-align: center;
  	text-shadow: 0 1px 1px #000;
  	text-shadow: 0 1px 1px rgba(0,0,0,.3);
  	vertical-align: baseline;
  }

  There are some vendor specific rules in there that will affect different browsers in different ways. You should also note that gradients are new in CSS and not all browsers support them—some older browsers don’t support them at all in fact. In that case, the fall back solid color is used and so you should set that as well.

  To change the gradients for the submit button (not including the hover, focus, or active states), you could start with the CSS from the original stylesheet and just topye the color values and update those. Here is an example:

  input[type=submit] {
  	background: #808080;
  	background: -moz-linear-gradient(top, #F2F2F2, #808080);
  	background: -o-linear-gradient(top, #F2F2F2, #808080);
  	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#808080));
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#808080' );
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#F2F2F2, endColorstr=#808080)";
  	border: solid 1px #808080;
  }

  To also change out the hover, focus, and active states, you would need to repeat the code with different colors you pick out for each of those states just like you can see in the original stylesheet. Here is an example to get you started:

  input[type=submit]:hover,
  input[type=submit]:focus {
  	background: #f43059;
  	background: -moz-linear-gradient(top, #fba2b5, #f43059);
  	background: -o-linear-gradient(top, #fba2b5, #fba2b5);
  	background: -webkit-gradient(linear, left top, left bottom, from(#fba2b5), to(#f43059));
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fba2b5', endColorstr='#f43059');
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fba2b5, endColorstr=#f43059)";
  	border-color: #f43059;
  }
  
  input[type=submit]:active {
  	background: #fba2b5;
  	background: -moz-linear-gradient(top, #f43059, #fba2b5);
  	background: -o-linear-gradient(top, #f43059, #fba2b5);
  	background: -webkit-gradient(linear, left top, left bottom, from(#f43059), to(#fba2b5));
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f43059', endColorstr='#fba2b5');
  	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f43059, endColorstr=#fba2b5)";
  	border-color: #f43059;
  	color: #fba2b5;
  }

  Adjust the color codes as necessary.