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:locationwindow.href=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> |