Page History

<style>
/* These styles will only affect the button "at rest" */
.green-button {
    --aui-btn-bg: #FFF;
    --aui-btn-text: #207a14;
    --aui-btn-border: #207a14;
    height: 35px;
    white-space: nowrap; /* Prevent text from wrapping */
    position: relative; /* Enable positioning of the close button */
    display: inline-flex; /* Use inline-flex for flexible width */
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Spread items horizontally */
    padding-right: 10px; /* Add padding between the text and close icon */
    margin-right: 5px; /* Add margin between close icon and end of button */
	float:right; /*always on right side of its parent container*/
}

/* Override hover styles in the same way if you want to ;) */
.green-button:hover {
    --aui-btn-bg: #207a14;
    --aui-btn-text: #fff;
    --aui-btn-border: #207a14;
}

/* Additional styles for the icon */
.green-button .aui-icon {
    margin-right: 5px; /* Adjust the spacing between the icon and text */
}

.close-button {
    font-size: 14px;
    cursor: pointer;
}

.close-button:hover::after {
    content: "Close this message";
    position: absolute;
    top: 50%;
    left: calc(100% + 5px); /* Position the tooltip to the right of the close button */
    transform: translate(-50%, -50%);
    background-color: #000;
    color: #ccc;
    padding: 3px 6px; /* Adjust the padding of the tooltip */
    border-radius: 5px;
    font-size: 10px; /* Reduce the size of the tooltip text */
    white-space: nowrap;
    font-weight: normal; /* Remove bold style */
}

.bold-text {
    font-weight: bold;
    margin-right: 5px; /* Add a margin of 5px after the close option */
} 
@media print {
   .noPrint {display:none;}
}
 </style>

<button class="create-dialog-create-button aui-button green-button aui-button-primary noPrint" tabindex="100" onclick="javascript:window.open('https://wikis.ec.europa.eu/x/7I1hBQ','_blank')">
    <span class="aui-icon aui-icon-small aui-iconfont-watch-filled"></span> <!-- Add the icon here -->
    <span class="bold-text">See how to watch this page</span>
    <span class="close-button" onclick="event.stopPropagation(); this.parentNode.style.display = 'none';" aria-label="Close">×</span> <!-- Close button -->
</button>