[GELÖST] aus dem "Weiterlesen..." Text (readmore) einen Button machen?

Hallo,
alle meine Versuche mit css oder sogar Template-Overrides waren bislang nicht abschließend erfolgreich. Die kann ich hier leider gar nicht mehr alle posten, da nicht mehr präsent. Folgendes in der custom.css funktioniert so halb: Halb, weil die Definition für die Textfarbe (color) und text-decoration: none trotz "!important" ignoriert werden. 

Hier am UNTEREN (!!!) Timeline-Modul, an dem ich gerade bastle, zu sehen (nur im Light-Mode):
 

www.crazy-to-bike.de/blogs/event-blog.html
Das obere Timeline-Modul auf der Seite greift nicht auf readmore zurück (deshalb sind die Buttons da korrekt), soll aber ersetzt werden.

Unser Support bezieht sich auf Fragen zu den Templates und Modulen, die so wie es der Standard vorsieht konzipiert sind. Wenn Sie so tiefgreifende Veränderungen durchführen möchten und die Standards umgehen, indem Sie Overrides anlegen oder individuelle CSS Codes in diesem Zusammenhang verwenden, wird dies nicht supportet. Ich bitte Sie auch von solchen Fragen oder Threads Abstand zu nehmen. Solche Threads werden von uns nicht auf gelöst gesetzt, sondern grundsätzlich gelöscht. Hier ist kein Entwicklerforum.

Ich zitiere gerne die Überschrift des Forums für Sie:

Wir fühlen uns verpflichtet, jede Art von Support-Anfragen umgehend und zu ihrer Zufriendheit zu beantworten. Jedoch können wir keine umfangreiche Hilfe für individuelle Anpassungen bieten. Individuelle Anpassungen sehen einfach aus, sind aber zumeist doch sehr komplex und benötigen fundierte Kenntnisse an Web-Technologien und Programmier Know-How. Vielen Dank für ihr Verständnis!
 

 

Nun kurz zur Frage wie man den Text "weiterlesen" als Button anzeigen kann.

Versuchen Sie diesen CSS Code

/*Button Weiterlesen Startseite angepasst*/
.as-readmore {  background: rgb(26, 164, 224);  color: #ffffff;  padding: 0.1rem 1rem;  font-size: 1rem;  margin-top: 1%;  border-radius: 0.3rem;  font-weight: normal;} 

/*Button Weiterlesen Startseite Hover angepasst*/
.as-readmore:hover {  background: #3cb2e5;  color: #ffffff;  padding: 0.1rem 1rem;  font-size: 1rem;  margin-top: 1%;  border-radius: 0.3rem;  font-weight: normal;}


Farbcode nach Ihren Wünschen anpassen.

Ok, sorry. Um so mehr vielen Dank für den Code. Das funktioniert 1a.