将图标添加到 wpform 提交按钮

Question

嗨，我想让表单按钮与图像中的一样。 表格的链接是这个http://ministerievanlicht.com/contact/

代码是这样的，它将使按钮相同但它不起作用。

 .button { margin: 0 auto; text-decoration:none; text-align:center; display: flex; background: #333333; color: white; justify-content: space-between; align-items: center; pointer-events:none; max-width:660px; border-bottom:solid gray 1px font-family: DIN pro; font-weight: bold; }.button.fa { padding:1em; pointer-events:auto; width:1.5em; }.button::before { content: ''; padding: 1em }

这是自定义 css 这是我想在按钮末尾添加图标

div.wpforms-container-full.wpforms-form input[type=date], div.wpforms-container-full.wpforms-form input[type=datetime], div.wpforms-container-full.wpforms-form input[type=datetime-local], div.wpforms-container-full.wpforms-form input[type=email], div.wpforms-container-full.wpforms-form input[type=month], div.wpforms-container-full.wpforms-form input[type=number], div.wpforms-container-full.wpforms-form input[type=password], div.wpforms-container-full.wpforms-form input[type=range], div.wpforms-container-full.wpforms-form input[type=search], div.wpforms-container-full.wpforms-form input[type=tel], div.wpforms-container-full.wpforms-form input[type=text], div.wpforms-container-full.wpforms-form input[type=time], div.wpforms-container-full.wpforms-form input[type=url], div.wpforms-container-full.wpforms-form input[type=week], div.wpforms-container-full.wpforms-form select, div.wpforms-container-full.wpforms-form textarea { padding: 18px 0px 18px 26px; } div.wpforms-container-full.wpforms-form.wpforms-field-label { font-family: 'DIN PRO'; font-style: normal; font-weight: normal; font-size: 12px; line-height: 24px; color: #333333; opacity: 1.0; } div.wpforms-container div.wpforms-uploader { width: 330px; height: 193px; } div.wpforms-container-full.wpforms-form input[type=checkbox], div.wpforms-container-full.wpforms-form input[type=radio] { width: 21px; height: 21px; } div.wpforms-container-full.wpforms-form input[type=submit], div.wpforms-container-full.wpforms-form button[type=submit], div.wpforms-container-full.wpforms-form.wpforms-page-button { background-color: #eee; border: 1px solid #ddd; color: #333; font-size: 1em; padding: 10px 330px; text-decoration: none; text-align: center; display: flex; background: #333333; color: white; justify-content: space-between; align-items: center; pointer-events: none; width: 660px; height: 55px; border-bottom: solid gray 1px; font-family: DIN pro; font-weight: bold; }

Answer 1

我为你准备了两个图标按钮。 一种适用于 hover，另一种适用于没有 hover。

 .btn { background-color: #333333; border: none; color: white; padding: 12px 16px; font-size: 16px; cursor: pointer; height: 60px; margin: 10px; position: relative; width: 660px; border-bottom: solid gray 1px } /* Darker background on mouse-over */.btn:hover { background-color: #444444; }.btn.ic-line { width: 1px; height: 60px; background: #ddd; float: right; position: absolute; right: 60px; top: 0; }.fa-custom { float: right; position: absolute; right: 20px; top: 22px; font-size: 1.1rem; color: #fff; }.btn.ic-line1 { width: 1px; height: 60px; background: #ddd; float: right; position: absolute; right: 60px; top: 0; visibility: hidden; }.fa-custom1 { float: right; position: absolute; right: 20px; top: 22px; font-size: 1.1rem; visibility: hidden; color: #fff; }.btn:hover.ic-line1 { visibility: visible; }.btn:hover.fa-custom1 { visibility: visible; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <h2>Icon Buttons</h2> <p>Icon buttons:</p> <button class="btn"><i class="fa fa-arrow-right fa-custom"></i><i class="ic-line"></i>Send</button> <h2>Icon Buttons When hover</h2> <p>Icon buttons:</p> <button class="btn"><i class="fa fa-arrow-right fa-custom1"></i><i class="ic-line1"></i>Send</button>