[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-buttons":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":371,"title":372,"slug":373,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":69,"cornerstone":52,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":730,"quiz":5,"exercises":747,"published_at":5,"updated_at":755,"prev":756,"next":757},"\u003Ch2 id=\"what-is-a-css-button\">What is a CSS button?\u003C\u002Fh2>\u003Cp>A \u003Cstrong>CSS button\u003C\u002Fstrong> is a clickable control styled with CSS so users can clearly see what it does and whether it is available. Buttons trigger actions such as submit, save, open a menu or delete. Good button design is one of the most important parts of a UI component library, because buttons appear on almost every page.\u003C\u002Fp>\u003Cp>Focus keyword: \u003Cstrong>CSS buttons\u003C\u002Fstrong>. Related trending keywords: \u003Cem>CSS button hover effects\u003C\u002Fem>, \u003Cem>accessible buttons\u003C\u002Fem>, \u003Cem>button focus-visible\u003C\u002Fem>, \u003Cem>color-mix() hover color\u003C\u002Fem>, \u003Cem>design tokens\u003C\u002Fem>, \u003Cem>CSS custom properties components\u003C\u002Fem>, \u003Cem>loading button CSS\u003C\u002Fem>, \u003Cem>icon button\u003C\u002Fem>.\u003C\u002Fp>\u003Ch2 id=\"use-the-right-element-button-vs-link\">Use the right element: button vs link\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode><button>\u003C\u002Fcode>: performs an \u003Cstrong>action\u003C\u002Fstrong> on the current page (submit, toggle, open dialog). It is focusable and works with Enter and Space by default.\u003C\u002Fli>\u003Cli>\u003Ccode><a href>\u003C\u002Fcode>: \u003Cstrong>navigates\u003C\u002Fstrong> somewhere. Screen readers announce it as a link. You can style a link to look like a button, but keep the link semantics.\u003C\u002Fli>\u003Cli>Never build a button from a \u003Ccode><div>\u003C\u002Fcode> or \u003Ccode><span>\u003C\u002Fcode>. You would have to recreate keyboard support, focus and roles yourself.\u003C\u002Fli>\u003Cli>Inside a form, set \u003Ccode>type='button'\u003C\u002Fcode> for non-submit buttons, otherwise they submit the form by default.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"reset-the-browser-defaults-first\">Reset the browser defaults first\u003C\u002Fh2>\u003Cp>Buttons do not inherit fonts by default. A solid base rule is: \u003Ccode>font: inherit; cursor: pointer; border: 0; background: none;\u003C\u002Fcode> and then add your own padding, radius and colors. Add \u003Ccode>line-height\u003C\u002Fcode> and \u003Ccode>text-decoration: none\u003C\u002Fcode> when styling links as buttons.\u003C\u002Fp>\u003Ch2 id=\"button-variants\">Button variants\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Primary\u003C\u002Fstrong>: the main action on a page. Use only one per view.\u003C\u002Fli>\u003Cli>\u003Cstrong>Secondary\u003C\u002Fstrong>: a less important action, often a lighter fill.\u003C\u002Fli>\u003Cli>\u003Cstrong>Outline\u003C\u002Fstrong>: border only. Good for secondary choices.\u003C\u002Fli>\u003Cli>\u003Cstrong>Ghost or text\u003C\u002Fstrong>: no border or fill until hover. Good for toolbars.\u003C\u002Fli>\u003Cli>\u003Cstrong>Danger\u003C\u002Fstrong>: destructive actions like delete. Use red and a confirmation step.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Drive variants with CSS custom properties, for example \u003Ccode>--btn-bg\u003C\u002Fcode> and \u003Ccode>--btn-fg\u003C\u002Fcode>, so one base class supports many variants.\u003C\u002Fp>\u003Ch2 id=\"sizes-and-touch-targets\">Sizes and touch targets\u003C\u002Fh2>\u003Cp>Offer small, medium and large sizes using padding and font size. For touch, aim for a target of at least 44 by 44 CSS pixels (WCAG 2.5.5 Level AAA) and never below 24 by 24 CSS pixels (WCAG 2.5.8 Level AA in WCAG 2.2). Use \u003Ccode>min-height\u003C\u002Fcode> and \u003Ccode>min-width\u003C\u002Fcode> instead of fixed sizes.\u003C\u002Fp>\u003Ch2 id=\"states-every-button-needs\">States every button needs\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Default\u003C\u002Fstrong>, \u003Cstrong>hover\u003C\u002Fstrong> (\u003Ccode>:hover\u003C\u002Fcode>), \u003Cstrong>active\u003C\u002Fstrong> (\u003Ccode>:active\u003C\u002Fcode>, pressed), \u003Cstrong>focus\u003C\u002Fstrong> (\u003Ccode>:focus-visible\u003C\u002Fcode>), \u003Cstrong>disabled\u003C\u002Fstrong> (\u003Ccode>:disabled\u003C\u002Fcode>) and \u003Cstrong>loading\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Use \u003Ccode>:focus-visible\u003C\u002Fcode> to show a clear outline for keyboard users without showing it on every mouse click. Never remove the outline without a replacement that has enough contrast.\u003C\u002Fli>\u003Cli>The native \u003Ccode>disabled\u003C\u002Fcode> attribute removes the button from tab order. If users need to discover why it is disabled, use \u003Ccode>aria-disabled='true'\u003C\u002Fcode> and block the action in JavaScript instead.\u003C\u002Fli>\u003Cli>For loading, set \u003Ccode>aria-busy='true'\u003C\u002Fcode>, keep the label, show a spinner and prevent double submits.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"modern-css-helpers\">Modern CSS helpers\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>color-mix(in srgb, var(--btn-bg) 85%, black)\u003C\u002Fcode> creates hover and active shades from a single base color.\u003C\u002Fli>\u003Cli>\u003Ccode>:where()\u003C\u002Fcode> keeps specificity low so variants are easy to override.\u003C\u002Fli>\u003Cli>\u003Ccode>transition\u003C\u002Fcode> on \u003Ccode>background-color\u003C\u002Fcode>, \u003Ccode>transform\u003C\u002Fcode> and \u003Ccode>box-shadow\u003C\u002Fcode> gives smooth feedback. Respect \u003Ccode>prefers-reduced-motion\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>:has()\u003C\u002Fcode> lets a button adapt when it contains an icon only, for example \u003Ccode>button:has(svg):not(:has(span))\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"icon-buttons\">Icon buttons\u003C\u002Fh2>\u003Cp>A button with only an icon needs an accessible name, such as \u003Ccode>aria-label='Close'\u003C\u002Fcode> or visually hidden text. Mark decorative SVG icons with \u003Ccode>aria-hidden='true'\u003C\u002Fcode> and \u003Ccode>focusable='false'\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"button-groups\">Button groups\u003C\u002Fh2>\u003Cp>Group related buttons with flex and a small gap. For a toggle button, use \u003Ccode>aria-pressed='true|false'\u003C\u002Fcode> and update it in JavaScript. For a group with one selected option, radio inputs styled as buttons are often better.\u003C\u002Fp>\u003Ch2 id=\"best-practices\">Best practices\u003C\u002Fh2>\u003Cul>\u003Cli>Use action-oriented text: Save changes, Add to cart. Avoid Click here.\u003C\u002Fli>\u003Cli>Keep color contrast at least 4.5:1 for text and 3:1 for the focus indicator and boundaries.\u003C\u002Fli>\u003Cli>Do not rely on color alone to show state.\u003C\u002Fli>\u003Cli>Keep consistent sizes, radius and spacing across the product.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"quick-summary\">Quick summary\u003C\u002Fh2>\u003Cp>Use semantic elements, a small set of variants built on custom properties, clear states, visible focus and accessible names. That makes \u003Cstrong>CSS buttons\u003C\u002Fstrong> reusable and inclusive.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .btn {\n    --bg: #4f46e5; --fg: #fff; --bd: transparent;\n    font: 600 15px system-ui, sans-serif;\n    padding: 10px 20px; min-height: 44px;\n    border-radius: 10px; border: 2px solid var(--bd);\n    background: var(--bg); color: var(--fg);\n    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;\n    transition: background-color .2s, transform .2s, box-shadow .2s;\n  }\n  .btn:hover { background: color-mix(in srgb, var(--bg) 85%, black); }\n  .btn:active { transform: scale(.97); }\n  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }\n  .btn.secondary { --bg: #e0e7ff; --fg: #312e81; }\n  .btn.outline { --bg: transparent; --fg: #4f46e5; --bd: #4f46e5; }\n  .btn.outline:hover { background: #eef2ff; }\n  .btn.ghost { --bg: transparent; --fg: #4f46e5; }\n  .btn.ghost:hover { background: #eef2ff; }\n  .btn.danger { --bg: #dc2626; }\n  .row { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px; }\n<\u002Fstyle>\n<div class='row'>\n  <button class='btn'>Primary<\u002Fbutton>\n  <button class='btn secondary'>Secondary<\u002Fbutton>\n  <button class='btn outline'>Outline<\u002Fbutton>\n  <button class='btn ghost'>Ghost<\u002Fbutton>\n  <button class='btn danger'>Delete<\u002Fbutton>\n  <a class='btn' href='#'>Link button<\u002Fa>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 24px; font-family: system-ui, sans-serif; }\n  .btn { border: 0; border-radius: 8px; background: #0f766e; color: #fff; font: 600 inherit; cursor: pointer; }\n  .sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }\n  .md { padding: 10px 18px; font-size: 15px; min-height: 44px; }\n  .lg { padding: 14px 26px; font-size: 18px; min-height: 52px; }\n  .btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }\n  .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; }\n<\u002Fstyle>\n<div class='row'>\n  <button class='btn sm'>Small<\u002Fbutton>\n  <button class='btn md'>Medium<\u002Fbutton>\n  <button class='btn lg'>Large<\u002Fbutton>\n  <button class='btn md' disabled>Disabled<\u002Fbutton>\n  <button class='btn md' aria-disabled='true' id='ad'>aria-disabled<\u002Fbutton>\n  <span id='msg' aria-live='polite'><\u002Fspan>\n<\u002Fdiv>\n<script>\n  document.getElementById('ad').addEventListener('click', function (e) {\n    if (this.getAttribute('aria-disabled') === 'true') { e.preventDefault(); document.getElementById('msg').textContent = 'Fill in the required fields first.'; }\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 24px; }\n  .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: 600 15px system-ui; cursor: pointer; }\n  .btn .spin { display: none; width: 16px; height: 16px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }\n  .btn[aria-busy='true'] { opacity: .8; cursor: progress; }\n  .btn[aria-busy='true'] .spin { display: inline-block; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .btn .spin { animation-duration: 2s; } }\n<\u002Fstyle>\n<button class='btn' id='save'><span class='spin' aria-hidden='true'><\u002Fspan><span id='label'>Save changes<\u002Fspan><\u002Fbutton>\n<script>\n  var b = document.getElementById('save');\n  b.addEventListener('click', function () {\n    if (b.getAttribute('aria-busy') === 'true') return;\n    b.setAttribute('aria-busy', 'true');\n    document.getElementById('label').textContent = 'Saving...';\n    setTimeout(function () { b.removeAttribute('aria-busy'); document.getElementById('label').textContent = 'Saved!'; }, 1800);\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .row { display: flex; gap: 14px; padding: 24px; }\n  .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #0f172a; cursor: pointer; transition: background-color .2s, transform .2s; }\n  .icon-btn:hover { background: #e2e8f0; transform: translateY(-2px); }\n  .icon-btn:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; }\n  .icon-btn svg { width: 22px; height: 22px; }\n<\u002Fstyle>\n<div class='row'>\n  <button class='icon-btn' aria-label='Add to favorites'>\n    <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' aria-hidden='true' focusable='false'><path d='M12 21s-7-4.4-9.3-9C1.1 8.7 3 5 6.6 5c2 0 3.4 1 5.4 3 2-2 3.4-3 5.4-3C21 5 22.900 8.700 21.300 12 19 16.600 12 21 12 21z'\u002F><\u002Fsvg>\n  <\u002Fbutton>\n  <button class='icon-btn' aria-label='Close dialog'>\n    <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' aria-hidden='true' focusable='false'><path d='M6 6l12 12M18 6L6 18'\u002F><\u002Fsvg>\n  <\u002Fbutton>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 24px; }\n  .group { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; }\n  .group button { padding: 10px 18px; border: 0; background: #fff; font: 600 14px system-ui; cursor: pointer; }\n  .group button + button { border-left: 1px solid #cbd5e1; }\n  .group button[aria-pressed='true'] { background: #4f46e5; color: #fff; }\n  .group button:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }\n<\u002Fstyle>\n<div class='group' role='group' aria-label='View mode' id='g'>\n  <button aria-pressed='true'>List<\u002Fbutton>\n  <button aria-pressed='false'>Grid<\u002Fbutton>\n  <button aria-pressed='false'>Table<\u002Fbutton>\n<\u002Fdiv>\n<script>\n  var btns = document.querySelectorAll('#g button');\n  btns.forEach(function (b) {\n    b.addEventListener('click', function () {\n      btns.forEach(function (x) { x.setAttribute('aria-pressed', 'false'); });\n      b.setAttribute('aria-pressed', 'true');\n    });\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":366,"slug":367},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-buttons","CSS Buttons: Styles, States & Accessibility Guide","Learn CSS buttons: button vs link, variants, sizes, hover, focus-visible, disabled and loading states, icon buttons and accessible design with live code.",[686,690,694,698,702,706,710,714,718,722,726],{"id":687,"text":688,"level":12,"children":689},"what-is-a-css-button","What is a CSS button?",[],{"id":691,"text":692,"level":12,"children":693},"use-the-right-element-button-vs-link","Use the right element: button vs link",[],{"id":695,"text":696,"level":12,"children":697},"reset-the-browser-defaults-first","Reset the browser defaults first",[],{"id":699,"text":700,"level":12,"children":701},"button-variants","Button variants",[],{"id":703,"text":704,"level":12,"children":705},"sizes-and-touch-targets","Sizes and touch targets",[],{"id":707,"text":708,"level":12,"children":709},"states-every-button-needs","States every button needs",[],{"id":711,"text":712,"level":12,"children":713},"modern-css-helpers","Modern CSS helpers",[],{"id":715,"text":716,"level":12,"children":717},"icon-buttons","Icon buttons",[],{"id":719,"text":720,"level":12,"children":721},"button-groups","Button groups",[],{"id":723,"text":724,"level":12,"children":725},"best-practices","Best practices",[],{"id":727,"text":728,"level":12,"children":729},"quick-summary","Quick summary",[],[731,735,738,741,744],{"id":732,"language":16,"code":733,"is_editable":734},604,"\u003Cstyle>\n  .btn {\n    --bg: #4f46e5; --fg: #fff; --bd: transparent;\n    font: 600 15px system-ui, sans-serif;\n    padding: 10px 20px; min-height: 44px;\n    border-radius: 10px; border: 2px solid var(--bd);\n    background: var(--bg); color: var(--fg);\n    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;\n    transition: background-color .2s, transform .2s, box-shadow .2s;\n  }\n  .btn:hover { background: color-mix(in srgb, var(--bg) 85%, black); }\n  .btn:active { transform: scale(.97); }\n  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }\n  .btn.secondary { --bg: #e0e7ff; --fg: #312e81; }\n  .btn.outline { --bg: transparent; --fg: #4f46e5; --bd: #4f46e5; }\n  .btn.outline:hover { background: #eef2ff; }\n  .btn.ghost { --bg: transparent; --fg: #4f46e5; }\n  .btn.ghost:hover { background: #eef2ff; }\n  .btn.danger { --bg: #dc2626; }\n  .row { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cbutton class='btn'>Primary\u003C\u002Fbutton>\n  \u003Cbutton class='btn secondary'>Secondary\u003C\u002Fbutton>\n  \u003Cbutton class='btn outline'>Outline\u003C\u002Fbutton>\n  \u003Cbutton class='btn ghost'>Ghost\u003C\u002Fbutton>\n  \u003Cbutton class='btn danger'>Delete\u003C\u002Fbutton>\n  \u003Ca class='btn' href='#'>Link button\u003C\u002Fa>\n\u003C\u002Fdiv>",true,{"id":736,"language":16,"code":737,"is_editable":734},605,"\u003Cstyle>\n  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 24px; font-family: system-ui, sans-serif; }\n  .btn { border: 0; border-radius: 8px; background: #0f766e; color: #fff; font: 600 inherit; cursor: pointer; }\n  .sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }\n  .md { padding: 10px 18px; font-size: 15px; min-height: 44px; }\n  .lg { padding: 14px 26px; font-size: 18px; min-height: 52px; }\n  .btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }\n  .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cbutton class='btn sm'>Small\u003C\u002Fbutton>\n  \u003Cbutton class='btn md'>Medium\u003C\u002Fbutton>\n  \u003Cbutton class='btn lg'>Large\u003C\u002Fbutton>\n  \u003Cbutton class='btn md' disabled>Disabled\u003C\u002Fbutton>\n  \u003Cbutton class='btn md' aria-disabled='true' id='ad'>aria-disabled\u003C\u002Fbutton>\n  \u003Cspan id='msg' aria-live='polite'>\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cscript>\n  document.getElementById('ad').addEventListener('click', function (e) {\n    if (this.getAttribute('aria-disabled') === 'true') { e.preventDefault(); document.getElementById('msg').textContent = 'Fill in the required fields first.'; }\n  });\n\u003C\u002Fscript>",{"id":739,"language":16,"code":740,"is_editable":734},606,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 24px; }\n  .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: 600 15px system-ui; cursor: pointer; }\n  .btn .spin { display: none; width: 16px; height: 16px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }\n  .btn[aria-busy='true'] { opacity: .8; cursor: progress; }\n  .btn[aria-busy='true'] .spin { display: inline-block; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .btn .spin { animation-duration: 2s; } }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn' id='save'>\u003Cspan class='spin' aria-hidden='true'>\u003C\u002Fspan>\u003Cspan id='label'>Save changes\u003C\u002Fspan>\u003C\u002Fbutton>\n\u003Cscript>\n  var b = document.getElementById('save');\n  b.addEventListener('click', function () {\n    if (b.getAttribute('aria-busy') === 'true') return;\n    b.setAttribute('aria-busy', 'true');\n    document.getElementById('label').textContent = 'Saving...';\n    setTimeout(function () { b.removeAttribute('aria-busy'); document.getElementById('label').textContent = 'Saved!'; }, 1800);\n  });\n\u003C\u002Fscript>",{"id":742,"language":16,"code":743,"is_editable":734},607,"\u003Cstyle>\n  .row { display: flex; gap: 14px; padding: 24px; }\n  .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #0f172a; cursor: pointer; transition: background-color .2s, transform .2s; }\n  .icon-btn:hover { background: #e2e8f0; transform: translateY(-2px); }\n  .icon-btn:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; }\n  .icon-btn svg { width: 22px; height: 22px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cbutton class='icon-btn' aria-label='Add to favorites'>\n    \u003Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' aria-hidden='true' focusable='false'>\u003Cpath d='M12 21s-7-4.4-9.3-9C1.1 8.7 3 5 6.6 5c2 0 3.4 1 5.4 3 2-2 3.4-3 5.4-3C21 5 22.900 8.700 21.300 12 19 16.600 12 21 12 21z'\u002F>\u003C\u002Fsvg>\n  \u003C\u002Fbutton>\n  \u003Cbutton class='icon-btn' aria-label='Close dialog'>\n    \u003Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' aria-hidden='true' focusable='false'>\u003Cpath d='M6 6l12 12M18 6L6 18'\u002F>\u003C\u002Fsvg>\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>",{"id":745,"language":16,"code":746,"is_editable":734},608,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 24px; }\n  .group { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; }\n  .group button { padding: 10px 18px; border: 0; background: #fff; font: 600 14px system-ui; cursor: pointer; }\n  .group button + button { border-left: 1px solid #cbd5e1; }\n  .group button[aria-pressed='true'] { background: #4f46e5; color: #fff; }\n  .group button:focus-visible { outline: 3px solid #f59e0b; outline-offset: -3px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='group' role='group' aria-label='View mode' id='g'>\n  \u003Cbutton aria-pressed='true'>List\u003C\u002Fbutton>\n  \u003Cbutton aria-pressed='false'>Grid\u003C\u002Fbutton>\n  \u003Cbutton aria-pressed='false'>Table\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cscript>\n  var btns = document.querySelectorAll('#g button');\n  btns.forEach(function (b) {\n    b.addEventListener('click', function () {\n      btns.forEach(function (x) { x.setAttribute('aria-pressed', 'false'); });\n      b.setAttribute('aria-pressed', 'true');\n    });\n  });\n\u003C\u002Fscript>",[748],{"id":749,"title":750,"slug":751,"prompt":752,"starter_code":753,"expected_output":754,"language":16,"order_index":23},212,"Build a reusable button with variants using custom properties","reusable-button-variants","Create a .btn base class that uses --bg and --fg custom properties. Add .success and .warning variants by only changing those properties. Add a hover color with color-mix(), a clear :focus-visible outline and a disabled style. The minimum height must be 44px.","\u003Cstyle>\n  .btn { font: 600 15px system-ui; padding: 10px 20px; border: 0; border-radius: 8px; cursor: pointer; }\n  \u002F* TODO: custom properties, hover with color-mix, focus-visible, disabled *\u002F\n  \u002F* TODO: .success and .warning variants *\u002F\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Default\u003C\u002Fbutton>\n\u003Cbutton class='btn success'>Success\u003C\u002Fbutton>\n\u003Cbutton class='btn warning'>Warning\u003C\u002Fbutton>\n\u003Cbutton class='btn' disabled>Disabled\u003C\u002Fbutton>","Three colored buttons with darker hover shades, a visible outline on keyboard focus, and a gray disabled button. All at least 44px tall.","2026-09-30T18:59:00+00:00",{"id":667,"slug":669,"title":668},{"id":375,"slug":377,"title":376}]