Die Schaltfläche zur Größenänderung in HTML/CSS funktionierte nicht wie erwartet ⇐ Jquery

[Anonymous]

Ich möchte die Größe der Schaltfläche ändern und sie etwas erweitern, damit der Text richtig ausgefüllt wird.
Dies ist der HTML- und CSS-Code meiner Schaltfläche:

Code: Select all

@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;
}
}

Code: Select all

    






Check Out My Blogs!

Nachdem Sie den obigen Code ausgeführt haben, können Sie sehen, dass er den Text in verschiedenen Zeilen ausgibt, aber ich möchte, dass der gesamte Text in derselben Zeile steht.
Erwartete Ausgabe:


Im Grunde genommen wollte ich den HTML- und CSS-Code der Schaltfläche in eine andere IDE einbinden, die mein Hauptprojekt enthält. Das CSS der Schaltfläche überschrieb bzw. kollidierte jedoch mit dem CSS meines Hauptprojekts, daher habe ich den Textkörper { im CSS der Schaltfläche in body1 { umbenannt und jetzt wird der Text in einer anderen Zeile erzeugt. Aber wenn Sie body1 in nur body ändern, wird das Problem behoben. Das möchte ich aber nicht, da sich body { in der Haupt-CSS-Datei meines Projekts befindet und mit dem CSS der Schaltfläche verwechselt wird, also habe ich ihn in body1 umbenannt. Gibt es eine Möglichkeit, die erwartete Ausgabe, die ich oben mit einem Bild gezeigt habe, zu erhalten, indem ich eines der CSS-Elemente ändere?