CODEWITHSUNDEEP
htmlcss
user14071398
user14071398

Reputation:

How to create button with image in button

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>

Upvotes: 0

Views: 503

Answers (6)

G-Cyrillus
G-Cyrillus

Reputation: 105893

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>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 0

user14206391
user14206391

Reputation:

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>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177940

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>

Upvotes: 1

barbaart
barbaart

Reputation: 857

You can use background-image css

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

<button>button</button>

Upvotes: 2

Akash
Akash

Reputation: 828

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;
}

Upvotes: 0

Related Questions