CSS3创建了上一个下一个箭头形状的点击按钮代码

使用方法

/* LESS Variables */
/* -------------- */
/* General */
/* Button Bar */
/* Button */
/* Elements */
/* -------- */
.cd__main{
   display: block !important;
}
html {
  line-height: 1.5;
  text-align: center;
}
h1 {
  text-size: 22px;
}
a {
  text-decoration: none;
}
/* Layout */
/* ------ */
h1.welcome,
.button-bar {
  margin: 20px auto;
  height: auto;
}
.button-bar {
  background: #ededed;
  padding: 40px;
}
/* General Button */
/* -------------- */
.button {
  position: relative;
  margin: 0;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 2.8px;
  padding-bottom: 2.8px;
  background: #0d5287;
  color: white;
  font-size: 14px;
}
.button::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}
.button:hover {
  background: #0585e8;
}
/* Arrow Buttons */
/* ------------- */
.next::after,
.prev::after {
  border-style: solid;
}
/* Next Button */
/* ----------- */
.next::after {
  right: -22px;
  border-width: 11px;
  border-color: transparent transparent transparent #0d5287;
}
.next:hover::after {
  border-left-color: #0585e8;
}
/* Prev Button */
/* ----------- */
.prev::after {
  left: -22px;
  border-color: transparent #0d5287 transparent transparent;
  border-width: 11px;
}
.prev:hover::after {
  border-right-color: #0585e8;
}