使用纯CSS创建特定按钮

Question

我是CSS / HTML的新手。使用纯CSS（无图像叠加），如何创建这样的按钮（请参阅附件）。当按钮处于活动状态时，会出现侧边三角形和刻度线。

Tick Mark and side banner on button

谢谢

Answer 1

button {
    border: 4px solid #FFCC00;
    height: 100px;
    width: 140px;
    position: relative;
    background: white;
    border-radius: 8%;
}
.corner {
    width: 0px;
    height: 0px;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #FFCC00;
    position: absolute;
    top: 0;
    left: 0;
}
.tick{
    position: absolute;
    top: -4px;
    left: -1px;
    color: white;
}

<button>
  <span class="corner"></span>
  <span class="tick">&#10004</span>
  ON
</button>

Answer 2

enter code here

.btn {
   display: inline-block;
   border-radius: 4px;
   background-color: transparent;
   padding: 14px 36px;
   text-align: center;
   cursor: pointer;
   font-size: 1rem;
   transition: all .15s ease-in-out;
}

.btn-blue {
   border: 1px solid #007bff;
   color: #007bff;
}
.btn-green {
   border: 1px solid #28a745;
   color: #28a745;
}
.btn-red {
   border: 1px solid #dc3545;
   color: #dc3545;
}
.btn-grey {
   border: 1px solid #6c757d;
   color: #6c757d;
}

/* Change bg-color and text-color on mouse over  */
.btn-blue:hover {
   background-color: #007bff;
   color: white;
}
.btn-green:hover {
   background-color: #28a745;
   color: white;
}
.btn-red:hover {
   background-color: #dc3545;
   color: white;
}
.btn-grey:hover {
   background-color: #6c757d;
   color: white;
}

<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-red">Red</button>
<button type="button" class="btn btn-grey">Grey</button>

CSS Styling Buttons