Sign Board like Buttons design via css

Issue

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

Solution

@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 class="breadcrumb">
  <a class="breadcrumb__step breadcrumb__step--active" href="#">Choose product</a>
  <a class="breadcrumb__step" href="#">Place order</a>
  <a class="breadcrumb__step" href="#">Shiping</a>
  <a class="breadcrumb__step" href="#">Booking</a>
  <a class="breadcrumb__step" href="#">Complete</a>
 </div>

Answered By – The Duo

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.