Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I'm trying to make a pretty button but I'm not a CSS (or HTML) guy. I'm just trying to hobble together something nicer than a square.

I found the Sliding doors CSS example and like it, I've gotten some of it working correctly, but can't seem to get the left side to look correct.

Any CSS gurus willing to point me in the right direction. I think I'm declaring the span incorrectly.

Thank you.

<style type="text/css">
input.submitBtn  
{
    position: relative;
    border: 0; 
    cursor: pointer;
    overflow: visible; /* removes extra side padding in IE */
    padding: 0 15px 0 0; 
    margin-right:5px; 
    font-size:2em; 
    text-align: center; 
    background: transparent url(images/btn_blue_sprite.gif) no-repeat right -140px; 
}

input.submitBtn::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
}

input.submitBtn::span 
{
    position: relative;
    display: block; 
    white-space: nowrap;    
    padding: 13px 0 0 15px; 
    height:37px; 
    background: transparent url(images/btn_blue_sprite.gif) no-repeat left top; 
    color:#fff; 
}

input.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
    background-position: right -210px; 
}

input.submitBtn:hover span, button.submitBtnHover span {
    background-position: 0 -70px;
}

share|improve this question

2 Answers 2

up vote 1 down vote accepted

I found the error of my ways. I didn't have the button inside a . While I haven't gotten completely working yet, I did get a pretty button to show up.

share|improve this answer
    
That'll do it! Glad you got it figured out. –  Marc D Anderson Feb 10 '11 at 22:49

You haven't really described enough about what you want to accomplish for me to give a great answer, but if you just want a nice looking single 'button', you can use any image and add script to its click event so that it acts like a 'real' button.

share|improve this answer
    
Thanks Marc, I'm ran across this Sliding Door CSS thing that mades pretty buttons without having to make an image for each one. Which is handy since management likes to change the name of every button in the product every 2 days. I've gotten it to 'Sort-of' work, but the left side of the image isn't rendering so I'm thinking that my CSS declaration of the 'input.submitBtn::span' is wrong. Does it look ok? If it does, I'll look elsewhere. If you're interested in seeing what I'm trying to accomplish, here is a link: filamentgroup.com/examples/buttonElement/sprites –  user2062 Feb 7 '11 at 2:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.