Custom Submission Boxes

What they're doing is they hide the submit buttons, push the sidebar down a few hundred pixels, wrap some links in h6 headers, and style and position them to look like submit buttons.

This is the CSS they use:

.side .md h6 a {
    position: absolute;
    top: 60px;
    font-size: 14px;
    color: #fff !important;
    z-index: 1000;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .24);
    background-color: #006064;
    background-image: url(%%spritesheet%%) !important;
    background-position: 268px -214px !important;
    background-repeat: no-repeat !important;
    right: 16px;
    width: 300px;
    height: 36px;
    border-radius: 2px;
    line-height: 36px;
    border: none;
    text-align: left;
    padding: 0 16px;
    transition: all .25s ease;
    font-family: verdana, arial, sans-serif
}

.side .md h6 a:hover {
    background-color: #00838F
}

.sidebox.submit {
    display: none
}

.side .md h6:nth-of-type(1) a {
    top: 150px
}

.side .md h6:nth-of-type(2) a {
    top: 190px
}

.side .md h6:nth-of-type(3) a {
    top: 230px
}

.side .md h6:nth-of-type(4) a {
    top: 270px
}

.side .md h6:nth-of-type(5) a {
    top: 310px
}

.side .md h6:nth-of-type(6) a {
    top: 350px
}

.side .md h6:nth-of-type(7) a {
    top: 390px
}

.side .md h6:nth-of-type(8) a {
    top: 430px
}

.side .md h6:nth-of-type(9) a {
    top: 470px
}

.side {
    margin-top: 600px !important
}

.linkinfo {
    margin-top: 200px
}

To get the buttons, you put nine links in your sidebar wrapped in an h6 header like so:

###### [submit button 1](/link) [submit button 2](/link) [submit button 3](/link) [submit button 4](/link) [submit button 5](/link) [submit button 6](/link) [submit button 7](/link) [submit button 8](/link) [submit button 9](/link)

/r/csshelp Thread