Script editor

Copper Contributor

I am using the script editor to to create a custom button on my sharepoint page.

The button works as intended but if i change my background to anything but white I can see the rest of the webpart, resulting in a white box that i can't seem to get ride of.

 

Anyone know how to adjust my html/css code to get ride of this?

2 Replies
Have you tried below solution ?
HTML
<div id="customButton" class="custom-button">
Click Me
</div>
CSS
.custom-button {
display: inline-block;
padding: 10px 20px; /* Adjust padding as needed */
background-color: #3498db;
color: #fff;
border-radius: 5px;
cursor: pointer;
}

.custom-button:hover {
background-color: #2980b9;
}
Explanation:
The display: inline-block; property ensures that the button takes up only as much width as necessary.
Adjust the padding property to control the spacing inside the button.
border-radius provides rounded corners.
cursor: pointer; changes the cursor to indicate the button is clickable.
The :hover pseudo-class changes the background color on hover to provide visual feedback.

Implementation:
Open the SharePoint page in edit mode.
Add a Script Editor web part.
Insert the HTML and CSS code within the Script Editor web part.
Adjust the class names and styles according to your needs.
Remember to adjust the class names and styles to match your specific button's ID and CSS class. This example assumes you're using a <div> as a button, but you can apply similar styles to other HTML elements used as buttons.
thank you for the suggestion as well as the detailed explanation and implementation. Unfortunately, this did not work.