CODEWITHSUNDEEP
htmlcssbuttoncss-shapes
Kutase Chitsu
Kutase Chitsu

Reputation: 45

Button with triangle on a right side in css

I have this simple button:

.btn {
  border-radius: 2px;
  background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  color: rgb(64, 64, 64);
  text-align: center;
  height: 25px;
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 1px #d9d9d9;
}
<button class="btn">Some button</button>

Now I want to make something like this:

enter image description here

Upvotes: 0

Views: 4956

Answers (3)

Kachkol Asa
Kachkol Asa

Reputation: 432

You can wrap the button in a button and then use the position as relative of the wrapper and then add a :before, you can add a border to the :before and make the width and height 0.

It's hard to explain, it's better if you check this blog: https://developerwings.com/button-with-a-sideways-triangle-using-css-html/

Upvotes: 0

Turnip
Turnip

Reputation: 36742

It's certainly not perfect, but it ain't too bad...

.btn {
  border-radius: 2px;
  background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  color: rgb(64, 64, 64);
  text-align: center;
  height: 25px;
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 1px #d9d9d9;
    position: relative;
}

.btn span {
    position: relative;
    z-index: 1;
}

.btn:after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: -moz-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    display: block;
    position: absolute;
    top: 3px;
    right: -9px;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-bottom: none;
    border-radius: 2px;
    -webkit-transform: rotate(47deg) skew(5deg);
    -moz-transform: rotate(47deg) skew(5deg);
    transform: rotate(47deg) skew(5deg);
}
<button class="btn"><span>Some button</span></button>

Upvotes: 2

Nitin
Nitin

Reputation: 149

.btn {
    position: relative;
    background: #c2e1f5;
    border: 10px solid #c2e1f5;
}
.btn:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.btn:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

Upvotes: 0

Related Questions