0

How do I use a png image in a button.

This is type of button I am trying to create

.btn {
  background-color: red;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>

Improve this question
3
  • if any body help me out how can we do this type its very thankful. i.sstatic.net/4PJKh.jpg Commented Nov 6, 2020 at 8:02
  • Do you using any frameworks like bootstrap or ionic or something else or just plain html and css? Commented Nov 6, 2020 at 8:07
  • plain html and css Commented Nov 6, 2020 at 8:08

6 Answers 6

Reset to default
2

You can use background-image css

<style>
  button { 
  background-image: url('https://via.placeholder.com/350x150'); 
  width: 350px;
  height: 150px;
} 
</style>

<button>button</button>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

If you want glow:

Change the <i> to an image if you want your own images

https://codepen.io/Stockin/pen/XPvpoB

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("fa")) { 
    const parentID = tgt.closest("a").dataset.id;
    console.log(parentID)
    document.getElementById(parentID).classList.toggle("hide");
  }
})
body {
  margin: 0;
  padding: 0;
  background: #262626;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ul li {
  list-style: none;
  margin: 0 15px;
}

ul li a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: #171515;
  border-radius: 50%;
  font-size: 30px;
  color: #666;
  transition: .5s;
}

ul li a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #d35400;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

ul li a:hover:before {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  filter: blur(3px);
}

ul li a:hover {
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}

.hide {
  display: none
}
.pop { position:absolute; width:100px; height:100px; background-color:yellow;} 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="container">
  <div>
    <ul>
      <li><a href="#" data-id="arrows"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="btc"><i class="fa fa-btc" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="globe"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="home"><i class="fa fa-home" aria-hidden="true"></i></a></li>
      <li><a href="#" data-id="repeat"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
    </ul>
  </div>
  <div class="hide pop" id="arrows">Arrows</div>
  <div class="hide pop" id="btc">BTC</div>
</div>

Improve this answer

1 Comment

one more thing i want to ask how to make click on button png image is open ??
1

for the image, you can apply it as a bakground, as an image <img> or via a pseudo. text can be plain text or also injected from a pseudo. This is your choice

Background and pseudo can be used through classes, so it is easily reusable but the markup might be missing its meaning if you get an empty button

Shape can be drawn via clip-path. ( here is a tool to help draw and get familiar with it : https://bennettfeely.com/clippy/ )

Borders and shadow of the shapes can be drawn via filter ( see drop-shadow ) , but requires an extra markup level to make each button independant. let's use a <b></b> (unless you need it for fa-icon)

Here is an example of the idea , you can use class or single ids to set each button a different look.

.btn b {
  display: inline-block;
  background-color: red;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  clip-path: polygon(0% 14%, 0% 100%, 87% 100%, 100% 88%, 100% 0%, 12% 0%);
}

.btn {
  border: none;
  background: none;
  filter: drop-shadow(2px 0 gray) drop-shadow(-2px 0 gray) drop-shadow(0 2px gray) drop-shadow(0 -2px gray);
}

.btn:hover {
  filter: drop-shadow(0 0 5px blue)
}
/* demo purpose */
.btn+.btn b:before {
  content: url(https://picsum.photos/id/175/20/20);
  display: block;
  margin: auto;
}

.btn+.btn b:after {
  content: "text";
}
body {
background:url(https://picsum.photos/id/185/300/200) 0 0 / cover ;
}
<button class="btn">
  <b>&phone;<br>phone</b>
</button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>

edit

here is a javascript example to show/hide img on click

var btns = document.querySelectorAll("button.btn")

for (let i = 0; i < btns.length; i++) { 
  btns[i].addEventListener("click", () => {
  btns[i].classList.toggle("hide");
  })
  
}
/* added */ .btn.hide b:before {opacity:0}
.btn b {
  display: inline-block;
  background-color: red;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  clip-path: polygon(0% 14%, 0% 100%, 87% 100%, 100% 88%, 100% 0%, 12% 0%);
}

.btn {
  border: none;
  background: none;
  filter: drop-shadow(2px 0 gray) drop-shadow(-2px 0 gray) drop-shadow(0 2px gray) drop-shadow(0 -2px gray); 
}

.btn:hover {
  filter: drop-shadow(0 0 5px blue)
}
 
/* demo purpose */
.btn b:before {
  content: url(https://picsum.photos/id/175/20/20);
  display: block;
  margin: auto; 
}

.btn b:after {
  content: "text";
}
body {
background:url(https://picsum.photos/id/185/300/200) 0 0 / cover ;
}
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>
<button class="btn"><b></b></button>

Improve this answer

6 Comments

one more thing i want to ask how to make click on button png image is open ??
?? the button will catch the click. Do you mean you only want the img to be clicked ? adde another snippet
i want to make when i clk on phone button then new png image is show using javascript or something ??
:focus might help in css but it will be lost as soon as you click elsewhere . is that okay ? updated second snippet with :focus to let you see the idea. if it has to remain after clicking elsewhere, then js will be needed
Noo ,, means i want to create means when i clk on button then image is show and when agin i clk on button then image is hide..can u help me out
|
0

Add the following line to your .btn class. Replace 'myimageurl' with the relative path to the image

.btn {
  background-image: url(./myimageurl);
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
Improve this answer

1 Comment

one more thing i want to ask how to make click on button then png image is open ??
0

How about like this :D?

body{
background:url('https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626&ext=jpg');
background-size:100%;
padding:20%;
}
a:hover{
text-decoration:none;

}

button{
text-align:center;
padding:8px 18px 8px 18px;
color:white;
background:rgba(0,0,0,0.6);
border:2px solid silver;
border-radius: 15px 0px 15px 0px;
}

button b,button span{
font-family:arial;
  color:white;
}

button:hover{
  box-shadow:0px 0px 9px 3px #ffaa44;
}

button:hover b,button:hover span{
  color:#ffaa44;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626&ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>

<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626&ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>



<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626&ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>


<a href="https://img.freepik.com/free-photo/dark-blue-glow-dust-particle-abstract-background_35672-1414.jpg?size=626&ext=jpg" target="_blank">

  <button>
    <span class="glyphicon glyphicon-pencil"></span>
    <br>
    <b>edit</b>
  </button>
</a>

Improve this answer

5 Comments

M Hasan Nudin Thanks
one more thing i want to ask how to make click on button png image is open
can u plz help me out
png open,what umean?
means png file image is open when i clk on button
0

Here is the solution from me.

.btn_container {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 200px);
    margin: auto;
}

.btn {
    width: 70px;
    height: 50px;
    background-image: url("https://s1.iconbird.com/ico/2013/9/452/w512h5121380477044settings.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-color: lightgray;
    border: 0;
    outline: 0;
    cursor: pointer;
    box-shadow: gray 1px 1px 0,
                gray 2px 2px 0,
                gray 3px 3px 0,
                gray 4px 4px 0,
                gray 5px 5px 0,
                gray 6px 6px 0,
                gray 7px 7px 0,
                gray 8px 8px 0;
}

.btn:hover {
    background-color: darkgray;
    background-blend-mode: color-dodge;
}

.btn:focus {
   background-image: url("https://7coffee.in.ua/wp-content/uploads/2013/09/iconmonstr-tools-icon.png.pagespeed.ce.nUaWWvjugS.png");
   filter: drop-shadow(0 0 10px yellow);
   box-shadow: darkgray 1px 1px 0,
               darkgray 2px 2px 0,
               darkgray 3px 3px 0,
               darkgray 4px 4px 0,
               darkgray 5px 5px 0,
               darkgray 6px 6px 0,
               darkgray 7px 7px 0,
               darkgray 8px 8px 0;
}
<div class="btn_container">
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
  <button class="btn"></button>
</div>

Improve this answer

3 Comments

one more thing i want to ask how to make on click on button png image is open ??
how can we do using javascript
do you want to load a new icon into the button on click?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.