Button disabled and loading states

Size
3,677 Kb
Views
24,288

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 Previews

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;
}
Button disabled and loading states - Script Codes
Button disabled and loading states - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 4
Size 3,677 Kb
Views 24,288
Do you need developer help for Button disabled and loading states?

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!

Brandon Kennedy (brandonkennedy) Script Codes
Create amazing blog posts with AI!

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!