YAPS > CSS Codes

CSS Codes

With modern CSS, it's possible to create effect that previously would require a graphic program to achieve. I really enjoy recreating classic web clip art sets I find in CSS, as well as developing my own new styles, even if I don't end up using them on my own sites. So, I've decided to make this page, to share all these styles with you.

guidelines

These styles are free for personal use. You can include them on your page as-is or modify them as you see fit.
Credit is not required (but always appreciated). If you do want to credit, please include a link back to this site
Though also not required, if you do decide to use these styles, I'd love to know! Share a link in my guestbook.

instructions

Add the CSS code for the style you want to use to your page's style tag or style sheet.
Copy the example HTML, and update the information within. Be sure to change the class to match the class of whichever variation you chose - each variation has a unqiue class, so you can use more than one if you wish.

Web Fun Pack Buttons

The classic Web Fun Pack buttons everyone knows and loves, now in CSS.

HTML Code

Classic Button

.classic-btn {
            border-image-slice: 16 18 15 19 fill;
            border-image-width: 16px 18px 15px 19px;
            border-image-outset: 0px 0px 0px 0px;
            border-image-repeat: repeat repeat;
            border-image-source:
            url("data:image/gif;base64,R0lGODlhbAAuALP/AMDAwNaUlJxKSpRSSpxSSoxCOXM5MUIYEFo5MXs5KaVrWkIhCN7GlAAAAAAAAAAAACH5BAEAAAAALAAAAABsAC4AQAT/EMhJq7046827z4chjsfBnGiqrmzrvnB8liNphaIg73zv/yiBDYAz6IDIpFImFB0kRUNgSa0qA7XnrWYUBKbW8DUgaA49NK56zW673/C4U6uJGsX4fJBLLx71gHpmWn6BhniDFFFeh40+ZFloBwtylZaXmAslHxsKnp+goaKjpKWmp6icW2slra6vsLGys7S1tWx0F3YGJo6+L7u5i7/EPGa8UCN/xcwviUTKzdIuz4XT1ynV0djcz9A5YNzMkE43UQXh4oABBVm5GLuY8vP0au+q+Pn6+/zm8fUAA865h0agwYNwCOpi1UsdlTR86thzGCjYwhrLKAI6hkwRRo2/d471+QgyZKRvd0oSq4Ygh8qVIhAQ2vbSkTaXNW0OsZbz0M2UPQ39zBg0z08pRdedjEIgXdIqAQicRGnE6dMk5MopijLA6lUeAQa4g8fFi9evLL5wVKgoAcYyAlDJnUu3Lii4xxKw1fUPoV96m/bZGky4sGFbHCIAADs=");
            border-style: solid;
            
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            min-width: 108px;
            
            a {
            display: flex;
            align-items: center;
            justify-content: center;
            
            font-family: "Comic Sans MS", sans-serif;
            
            font-size: 16px;
            color: #5a2118;
            text-decoration: none;
            text-shadow: 2px 2px 3px #997858;
            padding: 0.5em 0.75em;
            text-wrap: nowrap;
            width: 100%;
            height: 100%;
            }
            }

Wood Button

.wood-btn {
            border-image-slice: 8 11 8 11 fill;
            border-image-width: 8px 11px 8px 11px;
            border-image-outset: 0px 0px 0px 0px;
            border-image-repeat: round round;
            border-image-source:
            url("data:image/gif;base64,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");
            
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 39px;
            min-width: 160px;
            
            a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            text-wrap: nowrap;
            
            font-family: "Comic Sans MS", sans-serif;
            
            font-size: 16px;
            color: #000000;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
            
            padding: 8px 11px;
            }
            
            }

Yellow Button

.yellow-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            
            background-color: #FDB13E;
            background-image:
            url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYUExURQAAAEYhC2tKEiooFZJyNlYzC69tEwAAAK2nW10AAAAIdFJOU/////////8A3oO9WQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIDUuMS4xMhMBR3QAAAC4ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAIAAAAxAQIAEQAAAFoAAABphwQAAQAAAGwAAAAAAAAAYAAAAAEAAABgAAAAAQAAAFBhaW50Lk5FVCA1LjEuMTIAAAMAAJAHAAQAAAAwMjMwAaADAAEAAAABAAAABaAEAAEAAACWAAAAAAAAAAIAAQACAAQAAABSOTgAAgAHAAQAAAAwMTAwAAAAANmnmpXJtwtfAAAAvElEQVQoU2WRUZIEIQhDEwh4/xtPhbZ1Z4cPtR6SCGLdAIBzvgBg8E14RzKJBVL64mTJvNTf98MAJdXoeRmu9v3J2iaxfVuBBbVXcoqHc3iU8RZ9XObhwEJWqF+dG+CDL98lGZzejg7L13b69DXhx7+lWJgxMHqaslQGLUBmSa2Ix6FCMs+MUKglroUqdcdwRrRa3e4rQ7LOAlzoxEzZfzG+c7RMe3innb1xEj/cI+37W394tuz7nz9+B68PUTEI5dQY0igAAAAASUVORK5CYII=");
            background-repeat: no-repeat;
            background-position: left 4px center;
            
            border: #AF6D13 solid 1px;
            border-top: #FDCB80 solid 1px;
            border-right: #FDCB80 solid 1px;
            
            min-height: 26px;
            min-width: 128px;
            
            border-radius: 24px / 20px;
            
            a {
            display: flex;
            align-items: center;
            justify-content: start;
            
            padding-left: 39px;
            padding-right: 15px;
            
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            
            font-size: 12px;
            letter-spacing: 0.025em;
            color: #56330B;
            text-decoration: none;
            
            text-wrap: nowrap;
            width: 100%;
            height: 100%;
            }
            }

Blue Button

Green Button

Picture Frame Borders

Show off your pet pix or other images using the frames from the game! These frames will automatically resize to fit whatever image you put in them. You can also use them to wrap a div or other content.

HTML Code

Y A P S

Site
Resources

CSS Codes

Web Fun Pack Buttons

Picture Frame Borders