Setup a block element to look and operate like all standard buttons

UI Builder
1

Hi,

If we have a login form similar to the pinterest login page below. The “Log in” element is easily setup as a standard UI builder button element. Since the Facebook and Google buttons have an icon they are probably best setup as a block with curved corner (radius) and an image left aligned etc.

If I wanted the Facebook and Google “Block” buttons to look and function exactly like the standard UI Builder button (shadow on hover, transition, overlay on click etc) except for say the background colour, what would you say is the best way to make the “Block made up buttons” look and function exactly like the UI Builder button style?

I understand CSS but I am not good at it yet and I know its not specifically a Backendless thing but can I apply the themes button style to the block element? Or do I have to create a specific style for “Block made up buttons” that mimics/copies the theme button style and apply that?

Any advice on the best way to have “regular” Buttons and “made up buttons” operate exactly the same or the best approach to create something similar to the below login screen would be much appreciated. I have looked at the default Login Account template. I just wanted to extent that.

image
image378×518 45 KB

Thanks
Glenn

2

Hello @Glenn_D

There are several approaches

  1. create such a login button using essential components (Block/Icon/Image) https://codepen.io/eswarasai/pen/GZvJOE
  2. use a Button component and in AppExtension decorate it, style from the point can be applied
  3. create a custom component and

I would recommend you select the 3rd option

We will discuss it with the team but I believe we will create a Social Logic Button component and publish it to our Marketplace, but until it is implemented you need to build on your own

Regards, Vlad

3

Hi @vladimir-upirov,

Thanks for the quick reply. Really appreciate it. I will review the html and CSS and definitely give the create custom component a try. I have gone through your tutorial and also the header component in Stefan Jovanovic’s course on Udemy. I think you and the Backendless team have done a fantasitc job with UI Builder and the power of the backendless platform in general.

Today I had a go with just UI Builder elements and positioning, not the best approach but I sort of got there.

image
image1136×841 168 KB

1 Like