-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #654 from sugeng-sulistiyawan/master
Add Button Neon + Simple Loader
- Loading branch information
Showing
7 changed files
with
326 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Button Neon</title> | ||
|
|
||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <a href="#" class="btn btn-neon btn-success"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| Neon Success | ||
| </a> | ||
| <a href="#" class="btn btn-neon btn-warning"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| Neon Warning | ||
| </a> | ||
| <a href="#" class="btn btn-neon btn-danger"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| Neon Danger | ||
| </a> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| /* MAIN */ | ||
|
|
||
| :root { | ||
| --dark: #030c26; | ||
| --success: #00c853; | ||
| --warning: #ffab00; | ||
| --danger: #d50000; | ||
| } | ||
|
|
||
| /* .btn */ | ||
| .btn { | ||
| cursor: pointer; | ||
| vertical-align: middle; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| font-size: 14px; | ||
| letter-spacing: 2px; | ||
| padding: 10px 18px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* .btn.btn-neon */ | ||
| .btn.btn-neon { | ||
| position: relative; | ||
| display: inline-block; | ||
| border: none; | ||
| background: transparent; | ||
| text-transform: uppercase; | ||
| font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", | ||
| "Lucida Sans Unicode", Geneva, Verdana, sans-serif; | ||
| } | ||
|
|
||
| .btn.btn-neon:hover { | ||
| color: #fff !important; | ||
| border-radius: 2px; | ||
| transition: 0.2s; | ||
| transition-delay: 0.8s; | ||
| } | ||
|
|
||
| .btn.btn-neon>span { | ||
| position: absolute; | ||
| display: block; | ||
| } | ||
|
|
||
| .btn.btn-neon>span:nth-child(odd) { | ||
| width: 100%; | ||
| height: 2px; | ||
| } | ||
|
|
||
| .btn.btn-neon>span:nth-child(even) { | ||
| width: 2px; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .btn.btn-neon>span:nth-child(1) { | ||
| top: 0; | ||
| left: -100%; | ||
| } | ||
|
|
||
| .btn.btn-neon>span:nth-child(2) { | ||
| right: 0; | ||
| top: -100%; | ||
| } | ||
|
|
||
| .btn.btn-neon>span:nth-child(3) { | ||
| bottom: 0; | ||
| right: -100%; | ||
| } | ||
|
|
||
| .btn.btn-neon>span:nth-child(4) { | ||
| left: 0; | ||
| bottom: -100%; | ||
| } | ||
|
|
||
| .btn.btn-neon:hover>span { | ||
| transition: 0.5s; | ||
| } | ||
|
|
||
| .btn.btn-neon:hover>span:nth-child(1) { | ||
| left: 100%; | ||
| } | ||
|
|
||
| .btn.btn-neon:hover>span:nth-child(2) { | ||
| top: 100%; | ||
| transition-delay: 0.2s; | ||
| } | ||
|
|
||
| .btn.btn-neon:hover>span:nth-child(3) { | ||
| right: 100%; | ||
| transition-delay: 0.4s; | ||
| } | ||
|
|
||
| .btn.btn-neon:hover>span:nth-child(4) { | ||
| bottom: 100%; | ||
| transition-delay: 0.6s; | ||
| } | ||
|
|
||
| /* .btn.btn-neon.btn-success */ | ||
| .btn.btn-neon.btn-success { | ||
| color: var(--success); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-success:hover { | ||
| background: var(--success); | ||
| box-shadow: 0 0 10px var(--success), 0 0 20px var(--success), | ||
| 0 0 40px var(--success); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-success>span:nth-child(1) { | ||
| background: linear-gradient(90deg, transparent, var(--success)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-success>span:nth-child(2) { | ||
| background: linear-gradient(180deg, transparent, var(--success)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-success>span:nth-child(3) { | ||
| background: linear-gradient(270deg, transparent, var(--success)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-success>span:nth-child(4) { | ||
| background: linear-gradient(0deg, transparent, var(--success)); | ||
| } | ||
|
|
||
| /* .btn.btn-neon.btn-warning */ | ||
| .btn.btn-neon.btn-warning { | ||
| color: var(--warning); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-warning:hover { | ||
| background: var(--warning); | ||
| box-shadow: 0 0 10px var(--warning), 0 0 20px var(--warning), | ||
| 0 0 40px var(--warning); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-warning>span:nth-child(1) { | ||
| background: linear-gradient(90deg, transparent, var(--warning)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-warning>span:nth-child(2) { | ||
| background: linear-gradient(180deg, transparent, var(--warning)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-warning>span:nth-child(3) { | ||
| background: linear-gradient(270deg, transparent, var(--warning)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-warning>span:nth-child(4) { | ||
| background: linear-gradient(0deg, transparent, var(--warning)); | ||
| } | ||
|
|
||
| /* .btn.btn-neon.btn-danger */ | ||
| .btn.btn-neon.btn-danger { | ||
| color: var(--danger); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-danger:hover { | ||
| background: var(--danger); | ||
| box-shadow: 0 0 10px var(--danger), 0 0 20px var(--danger), | ||
| 0 0 40px var(--danger); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-danger>span:nth-child(1) { | ||
| background: linear-gradient(90deg, transparent, var(--danger)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-danger>span:nth-child(2) { | ||
| background: linear-gradient(180deg, transparent, var(--danger)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-danger>span:nth-child(3) { | ||
| background: linear-gradient(270deg, transparent, var(--danger)); | ||
| } | ||
|
|
||
| .btn.btn-neon.btn-danger>span:nth-child(4) { | ||
| background: linear-gradient(0deg, transparent, var(--danger)); | ||
| } | ||
|
|
||
|
|
||
| /* JUST FOR PREVIEW */ | ||
|
|
||
| html, | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| background: var(--dark); | ||
| width: 100%; | ||
| height: 100vh; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-content: center; | ||
| justify-content: center; | ||
| gap: 10px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Simple Loader</title> | ||
|
|
||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="preloader"> | ||
| <div class="loader"> | ||
| <span class="dot"></span> | ||
| <div class="dots"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /* MAIN */ | ||
|
|
||
| #preloader { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100vh; | ||
| background-color: #d50000; | ||
| } | ||
|
|
||
| #preloader>.loader { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| width: 146px; | ||
| padding: 16px 40px; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| #preloader>.loader>.dot, | ||
| #preloader>.loader>.dots>span { | ||
| width: 24px; | ||
| height: 24px; | ||
| background-color: #fff; | ||
| } | ||
|
|
||
| #preloader>.loader>.dot { | ||
| position: absolute; | ||
| animation: dot 1.2s infinite; | ||
| transform: translateX(0); | ||
| } | ||
|
|
||
| #preloader>.loader>.dots { | ||
| animation: dots 1.2s infinite; | ||
| transform: translateX(32px); | ||
| } | ||
|
|
||
| #preloader>.loader>.dots>span { | ||
| display: block; | ||
| float: left; | ||
| margin-left: 8px; | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| /* animation */ | ||
| @keyframes dot { | ||
| 50% { | ||
| transform: translateX(120px); | ||
| } | ||
| } | ||
|
|
||
| @keyframes dots { | ||
| 50% { | ||
| transform: translateX(-8px); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /* JUST FOR PREVIEW */ | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100vh; | ||
| background-color: #d50000; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.