Menu
Is there any way to make something like the X on that link with pure css?
227
The task is to make the close button using Pure CSS. There are two approaches that are discussed below. Approach 1: Create a <div> inside another <div> which has alphabet 'X' in it which helps in displaying the close button. When the “click” event occurs on 'X', then perform the operation.
Close Button CSS 2: Plus You can also create a close button using the plus( + ) symbol. You will need to rotate the plus sign so that it looks like a cancel button.
A close button is a <button> element with the class . close-button . We use the multiplication symbol ( × ) as the X icon. This icon is wrapped in a <span> with the attribute aria-hidden="true" , so screen readers don't read the X icon.
In the function, we select the close button with document. getElementById('close') . And we set the onclick property to a function that removes the the parent of the close button, which is the div. We get the parent of the close button with this.
I spent more time on this than I should have, and haven't tested in IE for obvious reasons. That being said, it's pretty much identical.
http://jsfiddle.net/adzFe/14/
a.boxclose{ float:right; margin-top:-30px; margin-right:-30px; cursor:pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 30px; background: #605F61; font-size: 31px; font-weight: bold; display: inline-block; line-height: 0px; padding: 11px 3px; } .boxclose:before { content: "×"; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
