CSS(Single Element Solution)? ??? ??? ?? ???

?? ??? ????? ??? ??? ??? ??? ?? ??? ????. . ????? ?? ??? ???? ?????, ??? ???? ??? ??? ??? ?? ??????

??? '?'???! ? ??? ???? ???? ?? ???? ???? ??? ????.

?? ?? ???

1. ??? ?? ? ?? ?? ??(:before ? :after)? ?????. ?? ?? ??? ? ?????.
2. ???? ??? ????? ?? ??? ??? ??? ?????. ??.

??? ?? ??

1. perspective ? RotateX? ???? :before ??? ???? ???? ??? ????. ???? ?? ?????.
2. :after ??? ??? ??? ????? ???? ?? ?????.

?? ?? ??

1. :before ? :after ??? ?? ?? ???? ???? ??? ????. ??.
2. ?? ?? ??? ???? ??? ?????.

???? ?? ??

1. ? ??? ???? ?????. -??? ??? ?? ??.
2. ??? ??? ???? ?? ???? ???. ??.

??? ??(?? ??)

1. ?? ???? ?? ??? ?? ??? ???? ???? ??? ??? ?????.
2. ??? ??? ??? ?? ???????.

?? ?

/* General Button Style */

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}

.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

  
/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}

.button.border:hover {
  color: #fff;
}

  
<a href="#" class="button ribbon-outset border">Click me!</a>
  

? ???? ?? ??? ???? ? ??? ??? ???? ???? ??? ??? ??? ?? ?? ? ????. ? ??? ?? ??? ?????? ???? ???? ?????.

? ??? ?? CSS ??? ??? ??? ??? ?? ? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!