Как оформить кнопку в контактной форме 7? Или добавить мою собственную кнопку

#wordpress

#wordpress

Вопрос:

 .btn.btn-decor {
    min-width: 12.375rem;
    color: #fff;
    padding: .625rem;
    background: #000;
    border: none;
        outline: none;

}
.btn {
    -webkit-transition: color .3s linear,border-color .3s linear,background .3s linear;
    transition: color .3s linear,border-color .3s linear,background .3s linear;
    min-width: 11.1875rem;
    font-family: sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: normal;
    padding: 1.25rem .9375rem;
    position: relative;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: .730rem;
    line-height: 1.5;
    border-radius: 0;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
.btn.btn-decor span {
    -webkit-transition: border-color .3s linear;
    transition: border-color .3s linear;
    display: block;
    padding: 1.25rem .9375rem;
    border-top: 2px solid #272726;
    border-bottom: 2px solid #272726;
    position: relative;

    }
    .btn.btn-decor span:before {
    bottom: 0;
}
.btn.btn-decor span:after, .btn.btn-decor span:before {
    -webkit-transition: border-color .3s linear;
    transition: border-color .3s linear;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.375rem;
    border-width: 0 2px;
    border-style: solid;
    border-color: #272726;
    color: #272726;
}
.btn.btn-decor .icon-star:first-child {
    left: -.25rem;
}
.btn.btn-decor .icon-star {
    -webkit-transition: color .4s linear,-webkit-transform .4s linear;
    transition: color .4s linear,-webkit-transform .4s linear;
    transition: color .4s linear,transform .4s linear;
    transition: color .4s linear,transform .4s linear,-webkit-transform .4s linear;
    width: .625rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
    font-size: .625rem;
    color: #272726;
}
[class*=" icon-"], [class^=icon-] {
    font-family: icomoon!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.btn.btn-decor .icon-star:nth-child(2) {
    right: -.25rem;
}
.btn.btn-decor .icon-star {
    -webkit-transition: color .4s linear,-webkit-transform .4s linear;
    transition: color .4s linear,-webkit-transform .4s linear;
    transition: color .4s linear,transform .4s linear;
    transition: color .4s linear,transform .4s linear,-webkit-transform .4s linear;
    width: .625rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
    font-size: .625rem;
    color: #272726;
    }
    [class*=" icon-"], [class^=icon-] {
    font-family: icomoon!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.btn.btn-decor span:after {
    top: 0;
}
.btn.btn-decor span:after, .btn.btn-decor span:before {
    -webkit-transition: border-color .3s linear;
    transition: border-color .3s linear;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.375rem;
    border-width: 0 2px;
    border-style: solid;
    border-color: #272726;
    color: #272726;
}
.icon-star:before {
    content: url("");
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-decor.btn-decor-white:hover .icon-star,.btn.btn-decor:hover .icon-star {
    -webkit-transform: translateY(-50%) rotate(360deg);
    -ms-transform: translateY(-50%) rotate(360deg);
    transform: translateY(-50%) rotate(360deg);
    color: #4f4f4d
}
.offer-section .stars-bg .icon-star:first-child {
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
}
.btn.btn-decor.btn-decor-white:hover span,.btn.btn-decor:hover span {
    border-color: #4f4f4d
}

.btn.btn-decor.btn-decor-white:hover span:after,.btn.btn-decor.btn-decor-white:hover span:before,.btn.btn-decor:hover span:after,.btn.btn-decor:hover span:before {
    border-color: #4f4f4d
}  
 <div>
    <a -label="Link more" href="#" gv-link="link_3" class="btn btn-decor js-check-text sticky-link">
       <span><i class="icon-star"></i>submit<i class="icon-star"></i></span>
    </a>
</div>  

введите описание изображения здесь
При добавлении моих классов кнопок в шорткод они отображаются, но некорректно. Может быть, потому, что у меня есть два класса «btn btn-decor» и «icon-star». Какие еще варианты могут быть, ну, помимо создания вашей собственной формы, чтобы кнопка работала в созданной контактной форме 7?

Комментарии:

1. Обновите вопрос с помощью короткого кода и способа добавления классов. Результат, который вы получаете, и ожидаемый результат, который вы хотите. Теперь это вообще непонятно.

2. Я внес некоторые изменения. На рисунке показан результат добавления моих классов в форму. Если вы посмотрите на код, то это то, что я хотел бы получить в форме.