.editbutton_table { /* default used also in edittable*/ display: none; } .edit-button-cs button { border: 0; display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-color: initial; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' fill='rgba(0,0,0,0.35)' viewBox='0 0 36 36'%3E%3Cpath d='M28 30H6V8h13.22l2-2H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V15l-2 2z'/%3E%3Cpath d='m33.53 5.84-3.37-3.37a1.61 1.61 0 0 0-2.28 0L14.17 16.26l-1.11 4.81A1.61 1.61 0 0 0 14.63 23a1.69 1.69 0 0 0 .37 0l4.85-1.07L33.53 8.12a1.61 1.61 0 0 0 0-2.28zM18.81 20.08l-3.66.81.85-3.63L26.32 6.87l2.82 2.82zM30.27 8.56l-2.82-2.82L29 4.16 31.84 7z'/%3E%3C/svg%3E%0A"); background-position-x: center; } .edit-button-cs svg { color: rgba(0, 0, 0, 0.35) } /* section_highlight is a node added when hovering around the edit button by the page.js file See sectionHighlight function We have just disable this function in script.js because it was moving element around Better solution would be to change the styling (background) with css */ /* style for section highlighting */ .edit-button-highlight-cs { background: #f8f9fa; } /** Only for section not button for table */ /** Because section edit can also be outside outline, it's here*/ .editbutton_section { right: 0; bottom: 0; position: absolute; z-index: 1040; }