0

I have the search button image on my site which has black background and grey search button and this is PNG image with the following code in stylesheet.css

Search Button in PNG Image

.topsearch .btn-search {
    width:29px;
    height:29px;
    background:url(images/btn_search.png) no-repeat;
    position:relative;
    z-index:2}

I want to change the black background color to orange color while displaying the search button in it in white color with the help of coding in CSS in stylesheet.css without physically changing the image.

Please guide me how can do this as I do not know the coding need help.

closed as off-topic by Lucian, Scott, usr2564301, Ovaryraptor, WELZ Oct 16 '18 at 16:51

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    What does this have to do with graphic design? – Lucian Oct 15 '18 at 20:10
  • It's graphics and it's design. I got into coding to bring my graphic design to life. I started off with ActionScript, then went on to using CSS3 to make cool graphics and graphic effects. As an example, you can use code to draw SVG's on webpages and style it with more code, usally CSS. For me, code is just as much a part of graphic design as using Photoshop (which you can also use code in to manpiulat SVG's and other graphics). A browser is just a new type of pallet. – Invariant Change Oct 16 '18 at 2:27
  • However @Nemish, you would usually get a quicker and more detailed answer if you posted in Stack Overflow stackoverflow.com – Invariant Change Oct 16 '18 at 3:00
3

Transparent PNG's and SVG's With CSS

To do this with CSS you need to do either of two things.

  1. Make your PNG(s) with colour and transparency. You can then use CSS to manipulate the colours. The main icon would be manipulated using something like the CSS hue-rotate filter

The below code will colour your PNG and background, then changes the colours on mouse:hover.

The filter:hue-rotate(90deg); number you use to achieve the colour you require, depends on the colour of your image.


   .topsearch .btn-search {
      position:relative;
      width:29px;
      height:29px;
      background:url(images/btn_search.png) no-repeat;
      filter:hue-rotate(90deg);
      background-color:#FFA500; /*#FFA500 = orange in hex*/
      z-index:2}
    }
   .topsearch .btn-search:hover {
      filter:hue-rotate(50deg);
      background-color:#000; /*#000 = blackin hex*/
}

  1. Use an SVG with HTML and CSS and to create and manipulate your icon.

svg {
  fill:#FFA500;
  /*stroke:#fff; uncomment if required*/
  stroke-width:.5;
  background-color:#555 /*#555 = grey*/;
}

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.