CODEWITHSUNDEEP
css
Ruwa
Ruwa

Reputation: 21

Issue in creating border for button using HTML

I'm trying to create a button.

How can I create a border left like this image?

enter image description here

<a class="genericBtn">
  <span>Click Me</span>
</a>

.genericBtn {
 cursor: pointer;
 background: #ffffff;
 color: #c40009;
 border: 1px solid #c40009;
 font-size: 20px;
 margin: 10px 0 0;
 padding: 20px 50px 20px 50px;
 width: auto;
}

Upvotes: 1

Views: 44

Answers (2)

Nafees Anwar
Nafees Anwar

Reputation: 6598

A quick hack with :before

.genericBtn {
  position: relative;
 cursor: pointer;
 background: #ffffff;
 color: #c40009;
 border: 1px solid #c40009;
 font-size: 20px;
 padding: 0 50px;
 height: 50px;
 display: inline-block;
 width: auto;
 line-height: 50px;
}

.genericBtn:before {
  position: absolute;
  top: 10px;
  left: -1px;
  width: 1px;
  height: 30px;
  background: #fff;
  content: "";
  display: block
}
<a class="genericBtn">
  <span>Click Me</span>
</a>

Adjust heights according to requirements.

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272592

You can consider a gradient coloration for the left side:

.genericBtn {
  cursor: pointer;
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  /**/
  border-left:none;
  background:linear-gradient(to bottom,#c40009 20%,transparent 20%,transparent 80%,#c40009 0) left/1px 100% no-repeat;
  /**/
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 50px;
  display:inline-block;
}
<a class="genericBtn">
  <span>Click Me</span>
</a>

Another syntax for the same effect:

.genericBtn {
  cursor: pointer;
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  /**/
  border-left:none;
  background:
    linear-gradient(#c40009,#c40009) top left,
    linear-gradient(#c40009,#c40009) bottom left;
  background-size:1px 20%;
  background-repeat:no-repeat;
  /**/
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 50px;
  display:inline-block;
}
<a class="genericBtn">
  <span>Click Me</span>
</a>

Upvotes: 3

Related Questions