CODEWITHSUNDEEP
htmlcss
Danish Riaz
Danish Riaz

Reputation: 71

how to add right border before icon in button

I want to add a border in the button before the icon what I m using is that my code is this

.button {
            background-color: #4CAF50;
            border: none;
            color: white;
            Width: 660px;
            Height:55px;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            background: #333333;
            position: absolute;
            left: 16.76%;
            right: 16.68%;
            top: 27.29%;
            bottom: 30.89%;
            font-family: DIN Pro;
            font-style: normal;
            font-weight: bold;
            font-size: 18px;
            line-height: 23px;
            text-align: center;
            text-transform: uppercase;
            color: #F6F6F6;
        }
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <a href="#" class="button">Contact<span style="border:solid 1px white"><i class="fa fa-home;"></span></i></a>
    </body>
</html>

but it is not setting up like that. I want to set it up like the same is in the picture

Image Link

Upvotes: 0

Views: 111

Answers (1)

return_false
return_false

Reputation: 738

Here is the code you need for the button. To answer your question about the border on the icon, I added a pseudo element (:after) to the button which contains the arrow icon. Then it was just a matter of applying border-left to it.

/* button styles */

.button {
  background-color: slategray;
  font-family: sans-serif;
  border: none;
  outline: none;
  min-height: 42px;
  min-width: 180px;
  max-width: 100%;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  color: #F6F6F6;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 52px 8px 10px;
  position: relative;
}

.button:after {
  content: "\f061";
  display: flex;
  position: absolute;
  font-family: "Font Awesome 5 Free", sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-left: 1px solid #8192a2;
}

.button:hover {
  background-color: #8192a2;
}

.button:hover:after {
  border-left-color: #95a7b8;
}


/* example styles */

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: coral;
}

* {
  box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">


<a href="#" class="button">Contact</a>

Upvotes: 1

Related Questions