#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. Я внес некоторые изменения. На рисунке показан результат добавления моих классов в форму. Если вы посмотрите на код, то это то, что я хотел бы получить в форме.