make a button with custom icon-CodePudding

I want to create a button like this :

So I did this

  <div  style="float:left">
        <button >
        <i ></i> Login </button>
  </div>

and this is css

.btn-registerLayout {
background-color: #425fab;
font-size: 10px;
outline: none;   
cursor: pointer;
text-align:left;
height: 20px !important;
width: 50px !important;
padding: 0 !important;
margin: 0 !important;
}
.btn {
 color: #fff !important;
}
.icon-play {
background-image: url(../image/EnterIcon.jpg);    
background-position: right;
display: inline;
height: 20px;  
}

the result is like this:

how can I make that?

CodePudding user response：

You need to modify the HTML, but here is a working example, which you can use as reference.

.btn-registerLayout {
  background-color: #425fab;
  font-size: 10px;
  outline: none;
  cursor: pointer;
  text-align: left;
  height: 20px !important;
  width: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.btn {
  color: #fff !important;
}

.btn-registerLayout {
  background-image: url(https://cdn.iconscout.com/icon/free/png-256/enter-22-458493.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}

<div  style="float:left">
  <button >Login </button>
</div>

CodePudding user response：

You can use the bootstrap icon to achieve this.

.btn.btn-registerLayout {
  background-color: #425fab;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  text-align: left;
  padding: 0 5px;
  margin: 0;
  border-radius: 0;
  color: #fff;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div  style="float:left">
  <button >
         Login <i ></i> </button>
</div>

CodePudding user response：

try this

Note: I change the img to yellow color

.icon-play {
    width: 10px;
    height: 10px;
    float: right;

    background-color: yellow;
  
    display: block; 
}