Image in a button (that has a border)

Anvil Q&A
1

What I’m trying to do:
Create a nice button with a Google image instead of the monocolor Google icon.

What I’ve tried and what’s not working:
Tried a link with a flow panel and an image and a label element inside like so.

Top is a button with the google icon, bottom is a link with a flow panel which has an image and a label.

image
image1926×258 43.8 KB

The problem is that there is no way to make a nice looking border around this that doesn’t take up the full row. The button component is nice in that it only forms a border around the button itself - not the full row by default.

I guess I just want to insert an image instead of an icon. Or be able to create a border on a link or flowpanel that hugs the content instead of the entire row.

Am I gonna have to create a custom component?

1 Like
2

I suspect that you can just wrap it in a FlowPanel. Inside the panel, it will be only as wide as it needs to be.

3

Tried that - unfortunately the flow panel border takes up the full width of the row.

4

Do you have a clone link so we can have a play?

5

Hi!

If you are familiar with CSS, you could try creating a new role for google sign button and adding the image using a ::before element.

You could do something like this:

/* Create a picture inside of the button */
.anvil-role-google-sign>button::before {
  content: "";
  background-image: url("_/theme/google_logo.png"); /* Url to the picture you want to use */
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: auto;
  width: 25px;
  max-width: 25px;
  max-height: 40px;
  height: 40px;
  margin-left: 5px;
  background-size: 20px 20px;
}
/* Move the text to avoid overlap with picture */
.anvil-role-google-sign .button-text {
  padding-left: 15px;
}
/* Set hover effect on the button */
.anvil-role-google-sign>button:hover {
  background-color: lightgray;
}

I created an example app, you can clone it and look at how it works :slight_smile:

2 Likes
6

I meant you should apply the border to what’s inside the FlowPanel.

7

Ah yes - unfortunately I need the border to go around both the image and the text.

8

Then one more FlowPanel, around the outside, set to center its contents, ought to do it.

2 Likes
9

That worked @p.colbert ! Thanks :slight_smile:

And @michalholub15 your solution worked too. I just had to tweak the margin-left and padding-left to make it look centered.

Thank you both! I left a clone link in the first post for anyone who is curious. Look for the ‘Signin’ form.

1 Like