button snippets

How to make rounded buttons with the button element

Tagged button, element, css, html, rounded  Languages html

25 pixel high buttons at your service:

button { 
    border: 0; 
    padding: 0;
    font-variant: small-caps;
    height:25px;
    background: transparent url('../images/button-background-left.png') no-repeat;
    cursor: pointer;
    text-align: center; 
}

button span { 
    font-family: georgia,serif;
    line-height: 25px;
    background: transparent url('../images/button-background.png') no-repeat top right;
    position:relative; 
    display:block; 
    white-space:nowrap; 
    margin-top: -2px;
    padding:0 15px; 
}

HTML:

<button type="submit" value="Hello"><span>Hello&nbsp;&raquo;</span></button>

IE 6 & 7 might need:

button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

References

Edit  Delete