如何在联系表单7按钮上应用悬停

Question

---

我需要使用form7 submit带有侧面箭头的按钮悬停设计，如下图所示。

这是我的CSS

[submit "submit class:test] .wpcf7 input[type="submit"],
 .wpcf7 input[type="button"] {
  background-color: #C2E8F5;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  margin-top: 15px;
  padding: 10px;
}
/* this is contact form 7 code*/

.et_pb_button:after,
.et_pb_button:before {
  position: absolute;
  margin-left: -1em;
  opacity: 0;
  text-shadow: none;
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  font-variant: none;
  line-height: 1em;
  text-transform: none;
  content: "\35";
}

Answer 1

使用fa图标插件，jquery和CSS实现

$(document).ready(function() {

  $(".btn").mouseenter(function(){
    $(".hover-icon").addClass("fa-chevron-right");
  });
   $(".btn").mouseleave(function(){
    $(".hover-icon").removeClass("fa-chevron-right");
  });
});

.btn {
  background-color: blue;
  border: none;
  color: #fff;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius:5px;
}


/* Darker background on mouse-over */
.btn:hover {
  background-color:#fff;
  color:#00f;
  border:1px solid #00f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn">Apply Here <i class="fa hover-icon"></i> </button>