How to customize Zurb Foundation 6 close button -

the close button seems way displaying notice user can click away. usage remains rather elusive newb.

i have placed 1 on page:

   <div>      <div class="callout" data-closable="slide-out-left">        <button class="close-button" data-close>&times;</button>        <p>whatever notice text</p>    </div> 

but unaware of way of changing color zurb way, or find closing animation options other 1 use above. button colored e.g. zurb success, , fade out effect rather confusingly fast slide out effect. how go that?

actually button tightly wrap around notice text, not take whole line width. doable in zurb-idiomatic way?

thanks!

to change color of close button or other style, can code css like

.close-button{    color:red; } 

if using sass can customize variables. http://foundation.zurb.com/sites/docs/close-button.html#sass-reference

the animations can use are:

slide-in-down slide-in-left slide-in-up slide-in-right slide-out-down slide-out-left slide-out-up slide-out-right fade-in fade-out hinge-in-from-top hinge-in-from-right hinge-in-from-bottom hinge-in-from-left hinge-in-from-middle-x hinge-in-from-middle-y hinge-out-from-top hinge-out-from-right hinge-out-from-bottom hinge-out-from-left hinge-out-from-middle-x hinge-out-from-middle-y scale-in-up scale-in-down scale-out-up scale-out-down spin-in spin-out spin-in-ccw spin-out-ccw 

http://foundation.zurb.com/sites/docs/motion-ui.html