magical-css

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magical-css@latest/dist/magic.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="icon" href="//palkerecsenyi.github.io/magic/documentation/media/icon.png" type="image/x-icon" /> <script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script> <link rel="stylesheet" href="../../prism.css"> <meta charset="UTF-8"> <title>Magic - Documentation</title> <script> function openNav(){ document.getElementById("nav-mobile").style.width = "100%"; } function closeNav(){ document.getElementById("nav-mobile").style.width = "0"; } </script> <script src="../../navbar.js"></script> </head> <body> <div id="nav-mobile" class="blue animate"> <a href="javascript:void(0)" class="close" onClick="closeNav()">×</a> <a href="https://palkerecsenyi.github.io/magic/">Home</a> <a href="https://palkerecsenyi.github.io/magic/start">Get Started</a> <a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a> <a href="https://github.com/palkerecsenyi/magic">Github</a> </div> <nav class="blue"> <ul class="nav-left"> <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li> <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/">Home</a></li> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/start">Get Started</a></li> <li class="nav-item active"><a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a></li> <li class="nav-item"><a href="https://github.com/palkerecsenyi/magic">Github</a></li> </ul> </nav> <div class="navigation blue"> <div class="links"> <script>addNav(true,"button");</script> </div> </div> <div class="container"> <h1 class="header">Button <span class="badge green">Updated</span></h1> <hr class="separator"> <p class="trailer">Buttons are a key part of any user interface. They naturally lead the user through pages and provoke interaction.</p> <h2><i class="fas fa-magic"></i> Magic Buttons</h2> <p>Magic has several different button styles. Unlike typical elements, they are <strong>not</strong> styled with Magic <a href="colour.html" class="link">Colours</a>. Colours for buttons are described below.</p> <h3>Simple button</h3> <p>A simple button can be made with a <span class="i-code"><button></span> tag or an <span class="i-code"><a></span> tag. As with many other frameworks, the class name for buttons is simply <span class="i-code">btn</span> . A simple button is made with the following code:</p> <pre><code class="language-markup"><button class="btn">Text</button>  <a class="btn">Text</a></code></pre> <p>However, this will not render a finished result:</p> <button class="btn">Text</button> <p>To make it complete, we need to pick a style and a colour.</p> <h3>Styles</h3> <p>Buttons have three different styles, each with different colours: filled, outline and gradient:</p> <button class="btn btn-default">Filled</button> <button class="btn btn-outline btn-default">Outline</button> <button class="btn-grad btn-grad-blue">Gradient</button> <h3>Filled buttons</h3> <p>To make a filled button, simply add the class <span class="i-code">btn-X</span>, where X is a <strong>standard</strong> Magic <a href="colour.html" class="link">Colour</a>.</p> <button class="btn btn-default">Default</button> <button class="btn btn-blue">Blue</button> <button class="btn btn-red">Red</button> <button class="btn btn-green">Green</button> <button class="btn btn-yellow">Yellow</button> <button class="btn btn-dark">Dark</button> <button class="btn btn-light">Light</button> <pre><code class="language-markup"><button class="btn btn-default">Default</button> <button class="btn btn-blue">Blue</button> <button class="btn btn-red">Red</button> <button class="btn btn-green">Green</button> <button class="btn btn-yellow">Yellow</button> <button class="btn btn-dark">Dark</button> <button class="btn btn-light">Light</button></code></pre> <div class="error info"> <i class="fas fa-info-circle error-icon"></i> Buttons only support standard Magic colours. By <strong>standard</strong> colour, we mean all colours except those appended by -lighten or -darken-X, i.e. only default, red, blue, green, yellow, dark or light, but not default-darken-1, etc. </div> <h3>Outline buttons</h3> <p>To make a button outlined, just add the class <span class="i-code">btn-outline</span>:</p> <button class="btn btn-default btn-outline">Default</button> <button class="btn btn-blue btn-outline">Blue</button> <button class="btn btn-red btn-outline">Red</button> <button class="btn btn-green btn-outline">Green</button> <button class="btn btn-yellow btn-outline">Yellow</button> <button class="btn btn-dark btn-outline">Dark</button> <button class="btn btn-light btn-outline">Light</button> <pre><code class="language-markup"><button class="btn btn-outline btn-default">Default</button> <button class="btn btn-outline btn-blue">Blue</button> <button class="btn btn-outline btn-red">Red</button> <button class="btn btn-outline btn-green">Green</button> <button class="btn btn-outline btn-yellow">Yellow</button> <button class="btn btn-outline btn-dark">Dark</button> <button class="btn btn-outline btn-light">Light</button></code></pre> <h3>Gradient buttons</h3> <p>These gradient buttons are completely different from all other buttons, and take different colours (but look quite nice):</p> <button class="btn-grad btn-grad-red">Red</button> <button class="btn-grad btn-grad-blue">Blue</button> <button class="btn-grad btn-grad-green">Green</button> <pre><code class="language-markup"><button class="btn-grad btn-grad-red">Red</button> <button class="btn-grad btn-grad-blue">Blue</button> <button class="btn-grad btn-grad-green">Green</button></code></pre> <h3>Button sizes</h3> <p>You can also make buttons larger or smaller, to fit into some scenarios:</p> <button class="btn btn-default btn-large">Large</button> <button class="btn-grad btn-grad-red btn-large">Large</button><br/> <button class="btn btn-default">Normal</button> <button class="btn-grad btn-grad-red">Normal</button><br/> <button class="btn btn-default btn-small">Small</button> <button class="btn-grad btn-grad-red btn-small">Small</button> <pre><code class="language-markup line-numbers"><button class="btn btn-default btn-large">Large</button> <button class="btn-grad btn-grad-red btn-large">Large</button> <button class="btn btn-default">Normal</button> <button class="btn-grad btn-grad-red">Normal</button> <button class="btn btn-default btn-small">Small</button> <button class="btn-grad btn-grad-red btn-small">Small</button></code></pre> <h3>Fluid buttons</h3> <p>In some cases, you may wish to make your button fill 100% of the container's width, with the <span class="i-code">btn-fluid</span> class:</p> <button class="btn btn-default btn-fluid">Fluid</button> <button class="btn btn-default btn-outline btn-fluid">Fluid</button> <button class="btn-grad btn-grad-green btn-fluid">Fluid</button> <pre><code class="language-markup line-numbers"><button class="btn btn-default btn-fluid">Fluid</button> <button class="btn btn-default btn-outline btn-fluid">Fluid</button> <button class="btn-grad btn-grad-green btn-fluid">Fluid</button></code></pre> <h3>Disabled buttons</h3> <p>Magic also styles disabled buttons. You can make a button disabled with the typical syntax of adding the attribute <span class="i-code">disabled</span> to the button:</p> <button class="btn btn-default">Enabled</button> <button class="btn" disabled>Disabled</button> <pre><code class="language-markup line-numbers"><button class="btn btn-default">Enabled</button> <button class="btn" disabled>Disabled</button></code></pre> <div class="error info"> <p class="no-mar"><i class="fas fa-info-circle error-icon"></i> <code><a></code> tags do not support the <code>disabled</code> attribute. Use the class '<code>btn-disabled</code>' instead: </p> <pre class="top"><code class="language-markup"><a class="btn btn-disabled" href="#">Disabled</a></code></pre> <p class="no-mar">Please note that this uses <code>pointer-events:none; tab-index:-1;</code> to disabled input. However, it is not <em>as</em> 'disabled' as a button would be. For more information, see <a href="https://css-tricks.com/almanac/properties/p/pointer-events/" target="_blank" class="link white-text">this CSS Tricks article</a> about pointer-events.</p> </div> <h3>Button groups</h3> <p>If you have a control panel with similar buttons, you can use Magic to group them. This only works for <strong>filled</strong> buttons (not outline or gradient).</p> <h4>Horizontal</h4> <p>Button groups have two variations: horizontal and vertical. This is how to lay out a horizontal button group:</p> <div class="btn-group"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div> <pre><code class="language-html"><div class="btn-group"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div></code></pre> <p>See? Super simple!</p> <p>You can add as many buttons as you like into a button group and they will scale automatically.</p> <h5>Fluid horizontal buttons</h5> <p>You can make horizontal button groups fluid, too. Just add the <span class="i-code">fluid</span> class name. This will make the buttons have an equal width, and fill 100% of the width of their container:</p> <div class="btn-group fluid"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div> <pre><code class="language-html"><div class="btn-group <strong>fluid</strong>"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div></code></pre> <div class="error info">If you try to fit too many buttons into a group, they will wrap to the next line: <div class="btn-group fluid"> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> <a href="#" class="btn btn-blue">Button</a> </div> </div> <p>This also works for vertical button groups.</p> <h4>Vertical</h4> <p>In some cases, you may wish to make a vertical button group. This is simple - just add the class <span class="i-code">vertical</span> to the group:</p> <div class="btn-group vertical"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div> <pre><code class="language-html"><div class="btn-group vertical"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div></code></pre> <p>The width of the entire group adjusts to the widest button automatically:</p> <div class="btn-group vertical"> <a href="#" class="btn btn-blue">New Document</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div> <h5>Fluid vertical buttons</h5> <p>As mentioned above, vertical buttons can be fluid too. Use the same syntax (just add the <span class="i-code">fluid</span>) class:</p> <div class="btn-group vertical fluid"> <a href="#" class="btn btn-blue">New</a> <a href="#" class="btn btn-blue">Save</a> <a href="#" class="btn btn-blue">Load</a> </div> <h4>Icons</h4> <p>As button groups are intended to be used as toolbox components, they work well with FontAwesome.com icons. Just use their normal syntax:</p> <div class="btn-group"> <a href="#" class="btn btn-blue"><i class="fas fa-file"></i></a> <a href="#" class="btn btn-blue"><i class="fas fa-save"></i></a> <a href="#" class="btn btn-blue"><i class="fas fa-folder-open"></i></a> <a href="#" class="btn btn-blue"><i class="fas fa-share"></i></a> </div> <pre><code class="language-html"><div class="btn-group"> <a href="#" class="btn btn-blue"><i class="fas fa-file"></i></a> <a href="#" class="btn btn-blue"><i class="fas fa-save"></i></a> <a href="#" class="btn btn-blue"><i class="fas fa-folder-open"></i></a> <a href="#" class="btn btn-blue"><i class="fas fa-share"></i></a> </div></code></pre> </div> <footer class="blue"> <div class="body"> <div class="content"> <h1>Magic.css</h1> <p>Neat and unique CSS framework for dynamic websites</p> </div> <div class="links"> <ul> <li class="header">Pages</li> <li><a href="/magic">Home</a></li> <li><a href="#">Start</a></li> <li><a href="https://github.com/palkerecsenyi/magic/">Github</a></li> </ul> </div> </div> <div class="bottom"> <p>© Magic 2018 | Magic.CSS <span class="version"></span> <span class="right-float"><a onClick="$('html, body').animate({ scrollTop: 0 }, 'slow');return false;" href="#" class="link"><i class="fas fa-arrow-up"></i> Back to Top</a></span></p> </div> </footer> <script src="../../prism.js"></script> </body> </html>