如何在联系表格 7 按钮上应用悬停答案

【问题标题】：How to apply hover on contact form 7 button如何在联系表格 7 按钮上应用悬停
【发布时间】：2019-05-17 16:37:07
【问题描述】：

我需要联系表格7 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";
}

【问题讨论】：

请添加你尝试过的html和css？
添加您的代码...
[提交“提交类：测试] .wpcf7 输入[type="submit"], .wpcf7 输入[type="button"] { 背景颜色：#C2E8F5；宽度：100%； text-align: center; text-transform: uppercase; margin-top: 15px; padding: 10px; } // 这是联系表格 7 代码 .et_pb_button:after, .et_pb_button:before { position: absolute; margin-left: - 1em；不透明度：0；文本阴影：无；字体大小：32px；字体粗细：400；字体样式：正常；字体变体：无；行高：1em；文本转换：无；内容： "\35"; }

标签： css contact-form-7

【解决方案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>

【讨论】：