We often want to use elements of the world famous CSS library: Bootstrap. Like the buttons, for example, which are still quite successful. To use them, we need to import the whole library, which can take a few Kb, useless when we just want the buttons.That's why I reproduced the Bootstrap buttons perfectly. Available on Codepen:
Or copy this code :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"); h1 { text-align: center; font-family: "Roboto", sans-serif; margin: 40px; } .container { display: block; margin-right: auto; margin-left: auto; width: fit-content; margin-top: 60px; } .btn { margin-right: 0.07rem; margin-left: 0.07rem; margin-bottom: 0.5rem; display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; outline: none; } .btn:hover, .btn:focus { text-decoration: none; } .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-primary:hover { color: #fff; background-color: #0069d9; border-color: #0069d9; } .btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-secondary:hover { color: #fff; background-color: #5a6268; border-color: #5a6268; } .btn-secondary:focus { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } .btn-success { color: #fff; background-color: #28a745; border-color: #28a745; } .btn-success:hover { color: #fff; background-color: #218838; border-color: #218838; } .btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #c82333; border-color: #c82333; } .btn-danger:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .btn-warning { color: #212529; background-color: #ffc107; border-color: #ffc107; } .btn-warning:hover { color: #212529; background-color: #e0a800; border-color: #e0a800; } .btn-warning:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-info { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } .btn-info:hover { color: #fff; background-color: #138496; border-color: #138496; } .btn-info:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } .btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-light:hover { color: #212529; background-color: #e2e6ea; border-color: #e2e6ea; } .btn-light:focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } .btn-dark { color: #fff; background-color: #343a40; border-color: #343a40; } .btn-dark:hover { color: #fff; background-color: #23272b; border-color: #23272b; } .btn-dark:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .btn-link { font-weight: 400; color: #007bff; background-color: transparent; border-color: transparent; } .btn-link:hover { color: #0056b3; text-decoration: underline; background-color: transparent; border-color: transparent; } </style> </head> <body> <h1>Bootstrap buttons</h1> <div class="container"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </div> </body> </html> 
Top comments (0)