How to edit buttons on SharePoint

Question

I am building my page through sharepoint, and I want some features like making the buttons larger adding colours inside of the button and giving it borders, but I still can't figure it out how to do it. I also want to create boxes like in the second picture for my page but I cant seem to figure it out how to do it.

Screenshot 2023-09-04 at 3.31.44 PM.png

Screenshot 2023-09-04 at 3.34.19 PM.png

Answer 1

1.According to the first image, you have added a Button web part in the modern page. This web part supports changing its color, but not support making the buttons larger and giving it border.

Button color is based on the site theme accent color. Go to Site settings gear -> Change the look -> Choose the site theme.

2.Follow below steps to design the page.

(1)In the home page, edit navigation as you desired.

(2)Edit home page -> Add a One column section.

(3)Add a Quick links web part in the One column section -> Add links -> From a link (Enter the link you want) -> Change custom image in the Thumbnail.

(4)In the Quick Links web part, choose Grid layout.

(5)Add a Vertical section, choose background as you want.

(6)Add a Quick links web part in the One column section -> Add links -> From a link (Enter the link you want) -> Choose List layout -> Turn off Show ikons.

Result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

And how can you apply a css to a picture so you can move the text in the middle of the picture or on the right and options like this. We tried to use the Code snippet but the css doesn't apply to that block, we don't know how to find the div name or class so we apply it too.

Answer 3

To change text in the Quick links web part, please follow below steps:

1.Press F12 in the keyboard.

2.Copy the original CSS codes.

.q_c_819bc2b6 {
    word-wrap: break-word;
    color: #242424;
    font-weight: 400;
    margin: 0 12px;
    min-width: 0;
}

3.Add a line in the CSS codes.

<style type="text/css">  
  
.q_c_819bc2b6 {
    word-wrap: break-word;
    color: #242424;
    font-weight: 400;
    margin: 0 12px;
    min-width: 0;
    text-align: center;
}
  
</style>  

4.Copy and paste modified codes into script editor web part.

5.Result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.