Buttons design link down below

I need this design tried via before after but need the arrow softer used skew and all. also found references but that didn't work out, it seems very easy and similar design but couldn't find similar ones on the internet via examples.

https://i.stack.imgur.com/BCRNb.png

CodePudding user response：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300&display=swap');

body {
  background: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
}
/* ------------------------- Separate line ------------------------- */
:root {
  --breadcrumb-theme-1: #398AB9;
  --breadcrumb-theme-2: #DFDFDE;
  --breadcrumb-theme-3: #1C658C;
  --breadcrumb-theme-4: #FFF;
}
a{
  font-size: medium;
}
.breadcrumb {
  text-align: center;
  display: inline-block;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  overflow: hidden;
  border-radius: 5px;
  counter-reset: flag;
}
.breadcrumb__step {
  text-decoration: none;
  outline: none;
  display: block;
  float: left;
  font-size: 14px;
  font-weight:bold;
  line-height: 36px;
  padding: 0 10px 0 30px;
  position: relative;
  background: var(--breadcrumb-theme-2);
  color: var(--breadcrumb-theme-1);
  transition: background 0.5s;
}
.breadcrumb__step:first-child {
  border-radius: 5px 0 0 5px;
}
.breadcrumb__step:first-child::before {
  left: 14px;
}
.breadcrumb__step:last-child {
  border-radius: 0 5px 5px 0;
  padding-right: 20px;
}
.breadcrumb__step:last-child::after {
  content: none;
}
.breadcrumb__step::after {
  content: '';
  position: absolute;
  top: 0;
  right: -18px;
  width: 36px;
  height: 36px;
  transform: scale(0.707) rotate(45deg);
  z-index: 1;
  border-radius: 0 5px 0 50px;
  background: var(--breadcrumb-theme-2);
  transition: background 0.5s;
  box-shadow: 2px -2px 0 2px var(--breadcrumb-theme-4);
}
.breadcrumb__step--active {
  color: var(--breadcrumb-theme-2);
  background: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::before {
  color: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::after {
  background: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover {
  color: var(--breadcrumb-theme-2);
  background: var(--breadcrumb-theme-3);
}
.breadcrumb__step:hover::before {
  color: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover::after {
  color: var(--breadcrumb-theme-1);
  background: var(--breadcrumb-theme-3);
}

<div >
  <a  href="#">Choose product</a>
  <a  href="#">Place order</a>
  <a  href="#">Shiping</a>
  <a  href="#">Booking</a>
  <a  href="#">Complete</a>
 </div>