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 |
Digital Static Search Box | 4,148 Kb |
Scrolling helix | 3,776 Kb |
3D 2D Box-Shadow Fish | 6,333 Kb |
CSS Animated Search Box Concepts | 7,072 Kb |
Box-shadow loader | 2,834 Kb |
Negative Padding | 4,069 Kb |
Crooked section dividers | 4,708 Kb |
Compare Some Different Grid Systems | 11,553 Kb |
Lazyload.js | 4,007 Kb |
BG Images WITHOUT Defining Them In CSS | 5,580 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 |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Flex layout example | Mofny | 1,663 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Table Exercise | Fresco | 9,585 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Next Word Predictor | Rfalor | 2,776 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!