CODEWITHSUNDEEP
htmlcssbootstrap-4
nnmmss
nnmmss

Reputation: 2974

make a button with custom icon

I want to create a button like this :

enter image description here

So I did this

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

enter image description here

how can I make that?

Upvotes: 0

Views: 3730

Answers (4)

dejo
dejo

Reputation: 46

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/[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">

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

Tried to make it as simple as possible, hope it helps.

Upvotes: 0

Lamine
Lamine

Reputation: 11

try this

Note: I change the img to yellow color

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

    background-color: yellow;
  
    display: block; 
}

Upvotes: 0

Amir Naeem
Amir Naeem

Reputation: 610

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

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56172

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

Upvotes: 0

Related Questions