CSS Buttons

{"name":"Schemin'","description":"Add interactive hover effects and click animations to CSS buttons to enhance user engagement and interaction.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/lmfaldqdyq2tvwfzq5uf","view_count":15,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:51:18.707185Z","updated_at":"2025-08-06T08:51:18.707186Z","user_id":246,"status":"DELETED","parent_id":null,"id":2001,"user":{"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"","style.css":"body {\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: \"Nunito\", monospace;\n font-weight: 700;\n background: #521e53;\n background-image: radial-gradient(circle, #cbc2cc57 1px, rgba(255, 255, 255, 0) 1px);\n background-size: 30px 30px;\n /* background: linear-gradient(to left, rgb(1, 75, 1), rgb(159, 4, 145)); */\n /* background: #967969; */\n /* background: #93C572 */\n /* background: #FFD59A */\n /* background: #74A12E */\n /* background: hsla(60, 16%, 8%, 1); */\n /* background-color: #750a83; */\n}\n\n.box {\n width: 48%;\n /* Each box takes up roughly half the screen width */\n height: calc(100vh - 100px);\n /* Adjust height to be the full screen height minus some padding */\n border-radius: 6px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n /* Align items to the top */\n align-items: flex-start;\n padding: 20px;\n margin: 2px;\n /* Add margin around each box */\n}\n\n.box-container {\n display: flex;\n width: 100%;\n justify-content: space-between;\n margin-top: 0;\n /* Remove space above the boxes */\n margin-bottom: 40px;\n /* Ensure space below the boxes */\n gap: 0;\n}\n\n.box-input {\n width: 90%;\n padding: 10px;\n font-size: 16px;\n border: 2px solid #402e17;\n border-radius: 6px;\n background-color: rgba(250, 249, 229, 0.793);\n /* Transparent cream */\n outline: none;\n margin-top: auto;\n font-family: 'Sono', monospace;\n /* Set font to Sono */\n}\n\n.box-input:focus {\n border-color: #402e17;\n /* Change this to desired color for focus */\n}\n\n.box p {\n text-align: left;\n /* Left align text for paragraphs within both light-box and */\n}\n\n.box-text {\n margin-bottom: auto;\n font-size: 18px;\n}\n\n.button-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 50px;\n margin-bottom: 50px;\n /* Move buttons higher by adding margin below */\n}\n\n.code-box {\n text-align: right;\n width: 66%;\n}\n\n.code-style-text {\n font-family: 'Victor Mono', monospace;\n font-size: 16px;\n color: #402e17;\n margin-top: 10px;\n /* Add some space between the texts */\n margin-bottom: auto;\n}\n\n.dark-box {\n background-color: #120911d3;\n border: 2px solid hsla(60, 16%, 8%, 0.925);\n box-shadow: -2px -2px 0 0 #d9d39b;\n /* Added box-shadow with negative offsets for top and left sides */\n}\n\n.dark-box .box-text {\n color: #FFFDD0;\n}\n\n.dark-box .box-input {\n background-color: #fbfadf;\n /* Cream background color */\n}\n\n.dark-box .box-input:focus {\n border-color: #ff69b4;\n /* Pink border when focused */\n}\n\n.dark-box .code-style-text {\n color: #FFFDD0;\n /* Change color to match the light color of the dark-box text */\n}\n\n.header-box {\n width: 100%;\n height: 100px;\n /* background-color: #750a83a2; */\n border-radius: 6px;\n /* box-shadow: inset 0 0 0 6px #d9d39b; */\n display: flex;\n justify-content: center;\n /* Center horizontally */\n align-items: center;\n /* Center vertically */\n margin-bottom: 0;\n /* Remove space below the header */\n text-align: center;\n}\n\n.header-text {\n font-family: \"Nunito\";\n font-size: 64px;\n color: #FFFDD0;\n font-weight: 800;\n margin: 0;\n /* Remove default margin */\n}\n\n.highlight-code {\n color: #f849a1;\n /* Pink color */\n font-weight: 800;\n /* Bold text */\n}\n\n.highlight-code-green {\n color: #01b904;\n /* Green color */\n font-weight: 800;\n /* Bold text */\n}\n\n.inner-light-box {\n background-color: #fffdd0de;\n border: 2px solid #402e17;\n box-shadow: inset 0 0 0 6px #d9d39b;\n width: 90%;\n padding: 25px;\n border-radius: 6px;\n margin: 10px 0;\n}\n\n.inner-light-box p {\n color: #402e17 !important;\n /* Force dark brown color for text in the inner-light-box */\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n.interactive-button {\n background-color: #FFFDD0;\n color: #402e17;\n position: relative;\n border: 1px solid #402e17;\n box-shadow: inset 0 0 0 6px #d9d39b;\n padding: 20px 40px;\n font-size: 16px;\n font-family: \"Sono\", monospace;\n font-weight: 700;\n /* Make the font bold */\n cursor: pointer;\n border-radius: 6px;\n transition: background-color 0.3s, box-shadow 0.3s;\n}\n\n.interactive-button:active {\n background-color: #d9d39b;\n transition: background-color 0.25s, color 0.25s;\n}\n\n.light-box {\n background-color: #fffdd0e1;\n border: 2px solid #402e17;\n box-shadow: inset 0 0 0 6px #d9d39b;\n /* text-align: left; */\n}\n\n.light-box .box-text {\n color: #402e17;\n}\n\n.light-box .box-input:focus {\n border-color: #8ccfff;\n /* Green border when focused */\n}\n\n.light-box p {\n text-align: left;\n /* Left align text for paragraphs within light-box */\n}\n\n#button3 {\n background-color: #E0B0FF;\n /* Mauve background color */\n box-shadow: inset 0 0 0 6px #c532c586;\n color: #490049;\n border-color: rgba(128, 0, 128, 0.5);\n /* Mauve border/bevel */\n border-width: 1px;\n /* Bevel width */\n border-style: solid;\n /* Border style */\n}\n\n#button3:active,\n#button4:active {\n background-color: #c532c5;\n /* Darker mauve background color */\n box-shadow: inset 0 0 0 6px #c532c5b9;\n /* Darker inset shadow */\n transition: background-color 0.25s, box-shadow 0.25s;\n}\n\n#button4 {\n background-color: #E0B0FF;\n /* Mauve background color */\n box-shadow: inset 0 0 0 6px #c532c586;\n color: #490049;\n border-color: rgba(128, 0, 128, 0.5);\n /* Mauve border/bevel */\n border-width: 1px;\n /* Bevel width */\n border-style: solid;\n /* Border style */\n}\n\n.text-output-box {\n text-align: left;\n margin-right: 0px;\n /* Add 10px of space to the right */\n width: 32%;\n /* Set width to roughly 1/3 of the screen */\n}\n\n.uh {\n color: #20061d\n}","index.html":"\n\n\n\n \n \n CSS Buttons\n \n \n \n \n\n\n\n

jippity.pro

Jippity.pro

This font is rounder but we may not want to\n differentiate English vs. code fonts.

Dark box. Dark box. Jippity output.

pink code

if (1 > 0) {

Helpful and friendly note.

var chickenFingers =\n new FriedChicken(salt,\n pepper)\n

\n \n

// I am editing code! I am tracking down bugs and encapsulating my ideas in a\n smart\n and elegant way! I am writing functions and variables with readable camelCase names!

1. function sumOfSquares(a,b) {\n return a*a + b*b }\n

2. var velocityX =\n Math.cos(v.angle) *\n v.magnitude;\n

JIPPITY.PRO

Dark box. Dark box. PlayStation 2.7

pink code

if (1 > 0) {

Helpful and friendly note.

var chickenFingers =\n new FriedChicken(salt, pepper)\n

\n \n

JIPPITY.PRO

TICONDEROGA

This is your code editor.

highlighted code

function abracadabra() {

\n \n

\n \n \n \n \n

\n\n\n"},"chat_history":[],"assets":[{"created_at":"2024-06-19T21:59:27.399272Z","name":"OK","resource_type":"image","tags":null,"project_id":2001,"creator":null,"cloudinary_id":"lmfaldqdyq2tvwfzq5uf","deleted":false,"id":10643}],"messages_sent":91,"comments":[],"steps":[]}