制作一个带有自定义图标的按钮

Question

我想创建一个这样的按钮 :

所以我这样做了

  <div class="d-inline pl-5" style="float:left">
        <button class="btn btn-registerLayout d-inline">
        <i class="icon-play"></i> Login </button>
  </div>

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

结果是这样的：

我该怎么做？

Answer 1

您需要修改 HTML，但这里有一个工作示例，您可以作为参考。

.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 class="d-inline pl-5" style="float:left">
  <button class="btn btn-registerLayout d-inline">Login </button>
</div>

Answer 2

您可以使用 bootstrap 图标来实现此目的。

.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/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<div class="d-inline pl-5" style="float:left">
  <button class="btn btn-registerLayout d-inline">
         Login <i class="ml-2 bi bi-box-arrow-in-right"></i> </button>
</div>

Answer 3

试试这个

注意：我把img改成了黄色

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

    background-color: yellow;
  
    display: block; 
}

Answer 4

a.mybtn {
  padding: 5px 10px;
  color: #fff;
  font-family: arial;
  text-decoration: none;
  background-color: #425fab;
  font-size: 10px;
  border: 1px solid #425fab;
}

a.mybtn i {
  padding-left: 2px;
}

a.mybtn:hover {
  transition: ease-in-out all .3s;
  color: #425fab;
  background: #fff;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

<a class="mybtn" href="#" onclick="#">
  <span>Login<i class="ml-2 bi bi-box-arrow-in-right"></i></span>
</a>

尽量做到简单，希望对您有所帮助。

制作一个带有自定义图标的按钮

make a button with custom icon

html

css

bootstrap-4