Question

how can i make a little button (link) with look of an exit-box? here my code:

.info {
    width: 100%;
    background-color: #3498db;
    padding: 10px;
    color: #fff;
}

.info a {
    color: #fff;
    border: 2px solid #fff;
    height: 16px;
    width: 16px;
    text-decoration: none;
    font-weight: bold;
}

and html:

<div class="info">
    This page is just at the building phase! It doesn't work all Features yet! 
    <a href="hide">x</a>
</div>

but look self..horrible: link

how can i make it nice?

Was it helpful?

Solution

maybe:

width:20px;
height 10px;
border: 1px solid #fff;
color: white;
padding-left: 10px;
padding-top: 4px;
font-size: 16px;
line-height: 0px;

work?

OTHER TIPS

Try this code:

http://jsfiddle.net/7pLJ3/

.info a {
    color: #fff;
    font: bold 11px Arial;
    text-decoration: none;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top