CSS Snippets - Tabs

Here's some of the (very rough) CSS code I used for my tabs. It's a very basic rejig of the spoiler buttons, but you can use them however you like! Let me know if you make anything cool :)
I would recommend looking at Stormbril's tabs because they know what they're talking about a thousand times more than I do :

Examples

Do you like to click tabs?

These are some tabs. You can put whatever you want here.

Images!

Bhufainese 'Little Crown' Dumplings by Pfeffermin (Using Microsoft Designer)

Mm Dumplings

Tabs

Tabs are soooo fun

Show spoiler

Things to remember when using this BB code:

• Leave a gap between [container : tab-button] and [spoiler] otherwise it will cut the tab off. (You can probably fix this by yourself with a little manouvering of the tab-button margins)


• Any code inside the 'well' aka the little box, can be changed colour or style however you like, but because these tabs use spoiler buttons, any bb code with a ' I ' symbol in it won't work - as spoilers use it for changing the title on the buttons.


• If you want the tabs to be separate from each other, leave a gap. If you want them on the same line, make sure not to leave a gap.


• You can change the width of the tabs using columns in your tab container box: i.e [container: col-md-3 tab button] [spoiler] [/spoiler][/container] .


• If you dont add a title at the end of your spoiler box like this: [spoiler] Here is my text I TITLE [/spoiler] then it will automatically say 'show spoiler as the title.'

These tabs are next to each other

This tab doesn't like personal space

This tab feels left out and moves closer

Neither does this one

Tiny Tab

Tabs can also be used with rows and columns.
BOoo Tabception!!

Don't do this it is very scary. But you could !

BB Code

BB Code

You can use this bbcode for your tags in your editing box, once the CSS code is added to your theme:


[container: tabs-box] [spoiler]
This is your text here I This is your tab/button title [/spoiler]
[/container]

Your BB Code will look like this:

[container: tabs-box] [spoiler]
This is your text here | This is your tab/button title [/spoiler]
[/container]

And the CSS in your theme will be this:

.tabs-box .spoiler-button {
color: white;
background: teal
transition: color 0.4s;
position: relative;
min-height: 1px;
box-shadow: 0px 0px 2px black;
text-shadow: 2px 3px 5px black;
transition: background-color 0.4s;
border: none;
font-size: 1em;
border-radius: 15px 15px 0px 0px;
margin: auto;
margin-top: 1em;
padding: .5em;
line-height: 1.5;
display: inline-block;
text-align: center;
white-space: nowrap
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: none;
transition: width 0.4s;
}

.user-css .tabs-box .spoiler-button:hover {
text-decoration: underline;
background-color: RGB(90, 90, 90
border-radius: 15px 15px 0px 0px;
}

.user-css .tabs-box .spoiler-button span {
text-decoration: none;
background: none;
position: relative;
min-height: 1px;
border: none;
}
.user-css .tabs-box .well {
color: white!important;
margin:auto;
margin-bottom: 10px;
padding: 2em;
backdrop-filter: blur(16px) saturate(180%)
--webkit-backdrop-filter: blur 16px, saturate(180
border: 0px solid rgba(255, 255, 255, 0.125
box-shadow: 0px 0px 10px black;
transition: width 0s, linear;
background-color: #36454F;
background-size: 100%;
border-radius: 0px 0px 15px 15px;
min-height: 20px;
transition: width 0.9s
}
.tabs-button .spoiler-button:hover {
background: #36454F !important;
text-decoration: none !important;
box-shadow: 0px 0px 5px black;
text-shadow: 0px 1px 3px black;
transition: color 0.6s;
}