Forum Discussion
Script editor
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?
4 Replies
- Hi,
I am jumping on this comment because I am looking for a solution for a similar use case but my issue is different. I am trying to create a simple button but I cannot figure out where to store the css file and make sure it is taken into account in the html code. I tried adding the .css file in the site asset, but this is not working. I tried to write it directly in the script editor but that does not work either.
Where is supposed to be stored the css code?
Thank you in advance for your help, I am really a beginner at this!In my experience you need to store the file in a document library. Once you have it stored find the file and go to Details > file path.
Copy the file path, and you'll need to reference that within your HTML.
- 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.
