Button disabled and loading states
How do I make an button disabled and loading states?
A test to show how loading states will change across themes while disabled states remain uniform.. What is a button disabled and loading states? How do you make a button disabled and loading states? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.
Button disabled and loading states - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>button disabled and loading states</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Button States</h2>
<div class="l-states"> <section id="disabled"> <h5>default disabled state</h5> <div class="default"> <button type="button" class="btn" disabled>disabled button</button> <button type="button" class="btn btn-primary" disabled>disabled primary button</button> </div> <h5>themed disabled state</h5> <h6>blue theme</h6> <div class="t-blue"> <button type="button" class="btn" disabled>disabled button</button> <button type="button" class="btn btn-primary" disabled>disabled primary button</button> </div> <h6>green theme</h6> <div class="t-green"> <button type="button" class="btn" disabled>disabled button</button> <button type="button" class="btn btn-primary" disabled>disabled primary button</button> </div> <h6>yellow theme</h6> <div class="t-gold"> <button type="button" class="btn" disabled>disabled button</button> <button type="button" class="btn btn-primary" disabled>disabled primary button</button> </div> <h6>orange theme</h6> <div class="t-orange"> <button type="button" class="btn" disabled>disabled button</button> <button type="button" class="btn btn-primary" disabled>disabled primary button</button> </div> </section> <section id="loading"> <h5>default loading state</h5> <div class="default"> <button type="button" class="btn btn-loading">default button</button> <button type="button" class="btn btn-primary btn-loading">primary button</button> </div> <h5>themed loading state</h5> <h6>blue theme</h6> <div class="t-blue"> <button type="button" class="btn btn-loading">default button</button> <button type="button" class="btn btn-primary btn-loading">primary button</button> </div> <h6>green theme</h6> <div class="t-green"> <button type="button" class="btn btn-loading">default button</button> <button type="button" class="btn btn-primary btn-loading">primary button</button> </div> <h6>gold theme</h6> <div class="t-gold"> <button type="button" class="btn btn-loading">default button</button> <button type="button" class="btn btn-primary btn-loading">primary button</button> </div> <h6>orange theme</h6> <div class="t-orange"> <button type="button" class="btn btn-loading">default button</button> <button type="button" class="btn btn-primary btn-loading">primary button</button> </div> </section>
</div>
</body>
</html>
Button disabled and loading states - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: whitesmoke; margin: 2vw; width: 96vw;
}
.l-states { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
section { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center;
}
h2 { text-align: center;
}
h5 { margin: 1.5em 0 .4em;
}
h6 { margin: 1em 0 .4em;
}
.btn { margin-bottom: .5em !important;
}
.btn { background: none; border: none; border-radius: 0; box-shadow: inset 0 0 0 1px #222; color: #222; display: inline-block; font-size: 1em; height: 36px; line-height: 36px; margin: 0; min-width: 160px; padding: 0 1.5em; position: relative; text-align: center; text-decoration: none; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; vertical-align: middle; width: auto;
}
.btn:hover, .btn:active, .btn:focus { box-shadow: inset 0 0 0 1px dodgerblue; color: dodgerblue; outline: none;
}
.btn:disabled, .btn:disabled:hover, .btn:disabled:active, .btn:disabled:focus { box-shadow: inset 0 0 0 1px #bdbdbd; color: #bdbdbd; pointer-events: none;
}
.btn-loading { pointer-events: none;
}
.btn-loading:after { -webkit-animation: btn-loading 1s linear infinite; animation: btn-loading 1s linear infinite; background: -webkit-repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 1em, rgba(0, 0, 0, 0.15) 1em, rgba(0, 0, 0, 0.15) 2em); background: repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 1em, rgba(0, 0, 0, 0.15) 1em, rgba(0, 0, 0, 0.15) 2em); background-size: 200%; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
@-webkit-keyframes btn-loading { from { background-position: -4em 0; } to { background-position: -1.7em 0; }
}
@keyframes btn-loading { from { background-position: -4em 0; } to { background-position: -1.7em 0; }
}
.btn-primary, .btn-secondary { background: #222; color: whitesmoke;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background: dodgerblue; color: white;
}
.btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:active, .btn-primary:disabled:focus, .btn-secondary:disabled, .btn-secondary:disabled:hover, .btn-secondary:disabled:active, .btn-secondary:disabled:focus { background: #bdbdbd; color: whitesmoke;
}
.t-blue .btn:hover, .t-blue .btn:active, .t-blue .btn:focus, .t-blue .btn-loading { box-shadow: inset 0 0 0 1px dodgerblue; color: dodgerblue;
}
.t-blue .btn-loading { background: dodgerblue; color: white;
}
.t-blue .btn-primary:hover, .t-blue .btn-primary:active, .t-blue .btn-primary:focus { background: dodgerblue; color: white;
}
.t-green .btn:hover, .t-green .btn:active, .t-green .btn:focus, .t-green .btn-loading { box-shadow: inset 0 0 0 1px limegreen; color: limegreen;
}
.t-green .btn-loading { background: limegreen; color: white;
}
.t-green .btn-primary:hover, .t-green .btn-primary:active, .t-green .btn-primary:focus { background: limegreen; color: white;
}
.t-gold .btn:hover, .t-gold .btn:active, .t-gold .btn:focus, .t-gold .btn-loading { box-shadow: inset 0 0 0 1px gold; color: gold;
}
.t-gold .btn-loading { background: gold; color: white;
}
.t-gold .btn-primary:hover, .t-gold .btn-primary:active, .t-gold .btn-primary:focus { background: gold; color: white;
}
.t-orange .btn:hover, .t-orange .btn:active, .t-orange .btn:focus, .t-orange .btn-loading { box-shadow: inset 0 0 0 1px orange; color: orange;
}
.t-orange .btn-loading { background: orange; color: white;
}
.t-orange .btn-primary:hover, .t-orange .btn-primary:active, .t-orange .btn-primary:focus { background: orange; color: white;
}
Developer | Brandon Kennedy |
Username | brandonkennedy |
Uploaded | September 18, 2022 |
Rating | 4 |
Size | 3,677 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
3D 2D Box-Shadow Fish | 6,333 Kb |
BG Images WITHOUT Defining Them In CSS | 5,580 Kb |
SCSS Tick Marks Function | 3,630 Kb |
Scrolling helix | 3,776 Kb |
And yet another box shadow loader | 7,615 Kb |
Lazyload.js | 4,007 Kb |
CSS Animated Search Box Concepts | 7,072 Kb |
Button disabled and loading states | 3,677 Kb |
Crooked section dividers | 4,708 Kb |
Browser Detection | 3,803 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
LeMandinque | Aadesida | 9,046 Kb |
GrcJS | Vino6 | 2,047 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Rainbow Drops | Csbarnes | 2,365 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!