How to create multiline button using button object 
Autor: Ray W.
Visitado 113,
Followers 1,
Compartido 0
I have a couple of problems which I have not been able to solve using the button object.
1, How do I create a multiline button. eg 1st line "Click here" 2nd line "To learn more about us"
2, I've added this button object to a row, and would like to align its position centrally vertically.
3, Is it possible to add a drop shadow to the button to make it appear more like a button?
Is it possible to embed a button object withing a text object, this would give me more control over alignment possible?
Happy New Year to you all! Thanks for your support.
Publicado en
Z.B. das Objekt "HTML Code" verwenden und HTML- sowie CSS-Code einfügen, siehe Beispiel
-----
-----
Der nachfolgende Code wurde per KI erzeugt und wird wie folgt auf die beiden Reiter verteilt.
===== Inhalte für das Objekt "HTML Code" =====
A) Im Reiter "HTML-Code" diesen Inhalt einfügen:
<a href="https://www.google.de" class="button-link">
<span class="button-text button-text-gross">Erste Zeile</span>
<span class="button-text button-text-klein">Zweite Zeile</span>
</a>
B) Im Reiter "Erweitert" diesen Inhalt einfügen:
.button-link {
display: inline-block; /* Wichtig für Größe und Padding */
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-align: center;
text-decoration: none; /* Entfernt Unterstreichung bei Links */
border-radius: 5px;
font-family: Arial, sans-serif;
cursor: pointer; /* Zeigt Klick-Cursor an */
transition: background-color 0.3s ease;
border: none;
}
.button-link:hover {
background-color: #0056b3;
}
.button-text {
display: block; /* Jede Zeile in eine eigene Block-Ebene */
line-height: 1.2; /* Abstand zwischen den Zeilen */
}
.button-text-gross {
font-size: 1.2em;
font-weight: bold;
}
.button-text-klein {
font-size: 0.9em;
opacity: 0.8;
}
==================================
- Den Link und Texte bei A) anpassen
- Bei B) können Farben, Abstände usw. eingestellt werden
(English)
For example, use the “HTML Code” object and insert HTML and CSS code.
The following code was generated by AI and is distributed between the two tabs as follows.
===== Contents for the "HTML Code" object =====
A) Insert this content into the “HTML code” tab:
<a href="https://www.google.de" class="button-link">
<span class="button-text button-text-big">First line</span>
<span class="button-text button-text-little">Second line</span>
</a>
B) Insert this content in the “Advanced” tab:
.button-link {
display: inline-block; /* Important for size and padding */
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-align: center;
text-decoration: none; /* Removes underlining from links */
border-radius: 5px;
font-family: Arial, sans-serif;
cursor: pointer; /* Displays click cursors */
transition: background-color 0.3s ease;
border: none;
}
.button-link:hover {
background-color: #0056b3;
}
.button-text {
display: block; /* Each line in its own block level */
line-height: 1.2; /* Space between lines */
}
.button-text-big {
font-size: 1.2em;
font-weight: bold;
}
.button-text-little {
font-size: 0.9em;
opacity: 0.8;
}
=================================
- Adjust the link and texts for A).
- At B) colors, distances, etc. can be adjusted
Addendum:
B) Could also be the “Expert” tab in the English version of WebSiteX5:
Autor
Thanks for taking the time to respond, and I appreciate you taking the time to create an example.
The real questions is, is the purpose of using a high-level product like websitex5, to simplify website creation?
I understand that we can throw away the basic functions of websitex5 and create the functionality by using raw HTML, but then what is the point of tools like websiteX5?
Not everybody has your skills, to simply just replace objects designed to create buttons with the code that you have created, even though you used Ai to create the code. One of the problems of creating code with Ai is it becomes unsupportable, and unmaintainable when php versions change. I used to use a product like wordpress, but got sick of the maintenance required of external language models like php being non backwards compatible. I rely on WebsiteX5 creators to keep their objects and tools updated when php versions change.
So the question is, am i asking for a specialization that is unreasonable for a tool like websitex5 to provide? I don't know what the developers think about this. Having 2 lines of text on a button does not seem too unreasonable, and offering the ability to add a drop shadow to format the button seems to me a reasonable request. I also feel that being able to position a button in the middle of a row (vertically) which looks more normal is also not an unreasonable expectation. The reason for my question was I thought I was missing some standard formatting options within websiteX5, but it looks like I'm not. Perhaps Websitex5 is too new, needs some more maturing to develope these kinds of features, I just don't know.
I will review your solution and see if the risk of maintaining it is worth it in the long term. Thanks again!
Since no <br> for a line break works for the "Button" object, I had to use the "HTML Code" object with HTML and CSS code.
The code I used has nothing to do with PHP, so there shouldn't be any PHP problems.
Maybe Incomedia will change the "Button" object so that one or more line breaks are possible with a <br>.
The button can be aligned to the position of the “HTML code” object, see screenshots below
-----
-----
Autor
Ok, I have been playing around, and have been able to use the margin control to position the button where I wanted it relative to the vertical position on the row. So this solved that issue.
I have been unable to create a multi-line button using the button object. What would be helpful would be if it were possible to add an escape code to allow a carriage return and line feed to be inserted to create the multi-line breaks in the text. Perhaps development can come up with some ideas there.
cansomebodylookatcorrectingyourtextboxcodetoincludethespacinginthetext,as.its.clearly.broken!