Welcome
HTML |
---|
<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> |