Кнопка изменения размера в HTML/CSS не будет работать должным образом ⇐ Jquery

[Anonymous]

Я хочу изменить размер кнопки и немного расширить ее, чтобы текст заполнялся правильно.
Это HTML и CSS моей кнопки:

Код: Выделить всё

@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}

body1 {
font-family: "Mukta", sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #f3f8fa;
}

button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
right: 25px;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}

@supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}

#yes {
grid-area: main;
align-self: center;
justify-self: center;
}
}

Код: Выделить всё

    






Check Out My Blogs!

После запуска приведенного выше кода вы увидите, что он выводит текст в разных строках, но я хочу, чтобы весь текст находился в одной строке.
Ожидаемый результат:


По сути, произошло следующее: я хотел включить HTML и CSS кнопки в другую среду IDE, в которой есть мой основной проект. Однако CSS кнопки переопределял CSS моего основного проекта или конфликтовал с ним, поэтому я переименовал тело { в CSS кнопки в body1 {, и теперь текст выводится на другой строке. Но если вы измените body1 на просто body, это исправит. Но я не хочу этого, поскольку тело { находится в основном файле CSS моего проекта и будет смешиваться с CSS кнопки, поэтому я переименовал его в body1 . Есть ли способ получить ожидаемый результат, который я показал выше с изображением, изменив любой из элементов CSS?

Подробнее здесь: https://stackoverflow.com/questions/655 ... s-expected