Custom Buttons
My contribution for the holidays is this template that allows you to create personalized buttons.
Happy Holidays!
Download and leave a review here...
49 replies
-
Thank you Steven and Happy Holidays! This will come in handy without all the effort.
‘Sam
-
Thank you Steven, as always, your gifts are very useful!
I wish you Happy Holidays and a creative new year 2024! -
-
Hi Steven, Thank you very much for your awesome and great contribution!!
-
and thank you very much for your help, that did it!
I have a questions - pls keep in mind that I am not that firm with ninox, html and css, its mostly learning by doing and of course this awesome, amazing, great helping forum here to accomplish what I need for my db.
Having written that I was able to 'create' this button by combining both codes - if there are better solutions/suggestions, pls be my guest
html("<!DOCTYPE html> <html> <head> <link rel='stylesheet' type='text/css' href='https://unpkg.com/@phosphor-icons/web@2.0.3/src/thin/style.css' /> <style> .ph-thin { padding: 8px 8px; font-family: 'Lexend', sans-serif; align-items: center; } </style> </head> <body> <i class='ph-thin ph-arrow-circle-left' style='background-color:#0EB8FF;color:#004079;border-radius:5px;font-size: 4em !important;display: inline-flex; '> <h1 style='font-size:18px;display: inline-flex;color:white;justify-content: center;text-align:center;'> zurück zu Dashboard </h1> </i> </body> </html> </html>")
Ok, after hours 'learnig by doing' I finally noticed the difference between and concerning the icons (google and Phosphor).
At the end it was easier for me to use code and add the styles, but when I was trying to style the :hover it's always the same on all other buttons. This is why I tried again the code from
RSCustomButton({ text: { label: "Home", color: "#F5F5F5", size: "15 px" }, button: { color: "#046262", hovercolor: "#1E90FF", btnid: "1" }, symbol: { color: "#FF8D2C" } }, "home");
because it has btnid, but there I cant change the text/icon size.
Is there a way to combine the code somehow like to add a btnid to the first code above?
Thanks a lot.
Kruna
-
In my spare time, I'm working on creating an updated template that incorporates phosphor icons. If you're patient, I'll share it eventually. Thank you for all the positive responses.
-
Hi ,
while waiting for 's updated version of the buttons, I have adapted the above code so that you can add as many buttons as you want to a page, each with a different design.
On the first button inside a function field, you will place the following code:
html("<head> <link rel='stylesheet' type='text/css' href='https://unpkg.com/@phosphor-icons/web@2.0.3/src/thin/style.css' /> <style> /* Common styling for both buttons */ button { cursor: pointer; transition: background-color 0.3s; display: flex; align-items: center; text-align: center; } /* Styling for the first button */ #button1 { padding: 10px 20px; font-size: 16px; background-color: #3498db; color: #fff; border: none; border-radius: 5px; line-height: 1.5; /* Adjust line-height for vertical alignment */ } #button1:hover { background-color: #2980b9; } /* Styling for the second button */ #button2 { padding: 10px 20px; font-size: 16px; background-color: #27ae60; color: #fff; border: none; border-radius: 5px; line-height: 1.5; /* Adjust line-height for vertical alignment */ } #button2:hover { background-color: #219d49; } /* Adjust the icon size if needed */ .ph-thin { font-size: 4em; margin-right: 5px; } </style> </head> <body> <button id='button1'> <span class='ph-thin ph-arrow-circle-left'></span> zurück zu Dashboard </button> </body>")
For the second button inside a new function field, you will place only the following code:
html("<body> <button id='button2'> <span class='ph-thin ph-arrow-bend-up-left'></span> zurück zu Dashboard </button> </body>")
Τhe final result is shown in the following screenshot. Of course you can adjust the styling options as you wish. For the best optical blending don't forget to set the background color of the function fields to white. Is this what you are trying to accomplish?
-
Upps look on web and on my Android Table
-
Hi . I am glad you find it useful! In order to be able to change the icon color separately in each button you can add an inline style like below:
html("<body> <button id='button2'> <span class='ph-thin ph-arrow-bend-up-left' style='color: orange'></span> zurück zu Dashboard </button> </body>")
I don't think that the number of buttons into the page make any difference because you have already retrieve all the icons (thin weight) from the CDN.
I think that an appropriate name for them would be the "Phosphor Buttons".
Credit goes to Steven for the original contribution and Rafael for introducing us to the Phosphor icons.
I have attached a demo database.
-
Getting there ..... Update soon.....
Content aside
-
12
Likes
- 3 mths agoLast active
- 49Replies
- 1235Views
-
13
Following