LINK LINK

This has been sitting in my scraps unreleased since like early 2021 lmao. I just wasn't sure it'd be a useful resource, but my styled textareas seemed to be very useful to folks, so RELEASE THE HOUNDS, I guess.

The How To Use section below outlines some general tips and touches on notes for specific buttons and bars, so be sure to review it! You can pick up the codes below, beneath their individual live previews.

HOW TO USE:

❣️ Mind those LJ-raw tags!!

❣️ This code is mobile compatible! Some of the buttons ARE comment compatible.

❣️ These codes can be tossed into any of my info page or event codes with ease, and are likely compatible with similar codes made by other designers.

❣️ Both the buttons and the progress bars are wrapped in flex box divs so you can easily add additional links or bars. This also lets them more easily be stuffed into other codes!

❣️ BUTTON FONTS AND FONT SIZES ARE DECLARED WITHIN THE FLEX BOX AT THE TOP OF EACH CODE. You can mess with font-family and font-size and that can pretty significantly change the look of each button.

❣️ Most buttons have font-weight:bold declared in the link for improved readability. Delete this if you don't want bold text.

❣️ Messing with the padding values on each link can significantly change the look of a button. The first number (usually the smaller one) affects the top and bottom padding, the second affects left and right side padding.

❣️ If you're an intermediate/advanced coder, you can change the flex box to a grid and set the grid to some auto columns to create uniform widths.

❣️ I would definitely suggest using find-replace functions to update hex codes in these. While the live previews for all codes have unique coloring, the codes themselves have been unified to the following hex codes:

• hex code #fff, white, is the default font color for links, and must be changed manually for each link.


• hex code #40855e is the base background color for most buttons.


• hex code #064521 is generally used for outlines and shadows.


• hex code #297249 is a tertiary color used for accents.


• hex code #afd1be is a very light green-gray used only in button 06 hsr-esque for the inner line.


• hex code #000, black, is used in a couple of buttons for a wire frame effect.


• linear-gradient(90deg, rgba(255,150,191,1) 0%, rgba(238,109,80,1) 47%, rgba(219,2,119,1) 100%) is a sunset-y gradient used for PROGRESS BAR ##. You can generate a new gradient for that at cssgradient.io.


• There are a few instances where rgba(#,#,#,#) is used to create an automatic darkening effect. You shouldn't need to futz with those.

❣️ For ALL PROGRESS BARS you can increase or decrease the progress amount by updating the max-width:##% value where indicated with a comment in the code. A higher percent will mean the bar is more full.

❣️ GUIDELINES FOR SPECIFIC STYLES:

• For PIP BAR #1, fill pips by changing background:transparent to background:#XXXXXX where #XXXXXX is your desired hex code.


• Button 07: GHOST is semi-transparent and is intended to be used on backgrounds that are a color other than white or black. It will slightly darken the background.


• PROG BAR 03 is coded to accept an image url for a background on the bar itself. By default it comes with an animated gif rainbow gradient. Feel free to switch that out with anything!

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!