Hi there,

We have a lot of Quicklinks on a SharePoint Modern Hub Site and I have thematically grouped them by colour to make the user experience cleaner (e.g. all the IT Quicklinks are grouped together in blue).

Ideally, I would like to edit the groups of buttons themselves because our corporate colour is red and all red buttons are quite intense. Because I can’t edit the colour of the buttons themselves (as they inherit the theme palette), I’ve created individual image buttons and uploaded them. In the image attached, you can see a SharePoint button (spend request) and an image upload (Wiki).

I am having two problems:
1. When I select to fit the image to button, it actually creates an image that is larger than the original button. Therefore, the blue image buttons are larger than the red SharePoint buttons. This is causing alignment issues and means that the dynamic resizing of the page for different displays don’t match. I have read through the Microsoft pages for image sizes and matched those. I’ve also tried multiple variations increasing the height and/ or width (I have 14 versions of the same button) but I’m still not seeing the size represented correctly.
2. There is a thin red line of pixels below each button when the scaling of the page is anything different to 100%. This is only present on the Safari browser but, as many of our users have Safari on their Mac devices and mobile phones (it offers a more secure and integrated experience), we do not want them shifting to Google Chrome.

​Hi there,We have a lot of Quicklinks on a SharePoint Modern Hub Site and I have thematically grouped them by colour to make the user experience cleaner (e.g. all the IT Quicklinks are grouped together in blue).Ideally, I would like to edit the groups of buttons themselves because our corporate colour is red and all red buttons are quite intense. Because I can’t edit the colour of the buttons themselves (as they inherit the theme palette), I’ve created individual image buttons and uploaded them. In the image attached, you can see a SharePoint button (spend request) and an image upload (Wiki).I am having two problems:1. When I select to fit the image to button, it actually creates an image that is larger than the original button. Therefore, the blue image buttons are larger than the red SharePoint buttons. This is causing alignment issues and means that the dynamic resizing of the page for different displays don’t match. I have read through the Microsoft pages for image sizes and matched those. I’ve also tried multiple variations increasing the height and/ or width (I have 14 versions of the same button) but I’m still not seeing the size represented correctly.2. There is a thin red line of pixels below each button when the scaling of the page is anything different to 100%. This is only present on the Safari browser but, as many of our users have Safari on their Mac devices and mobile phones (it offers a more secure and integrated experience), we do not want them shifting to Google Chrome.   Read More

​