Anforderungen:
- Visual Studio Code
- Live Sass Compiler (Extension für Visual Studio Code)
- Live Server (Extension für Visual Studio Code)
Code:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles/styles.css"> <title>Neon Light Button Hover Effects</title> </head> <body> <div class="header"> <h1>Heinz Lehner</h1> <p>Webdesign - Entwicklung - Tutorials</p> </div> <main> <a href="https://heinzlehner.ch" class="btBlue"> <span></span> <span></span> <span></span> <span></span> KLICK MICH! </a> <a href="https://heinzlehner.ch" class="btGreen"> <span></span> <span></span> <span></span> <span></span> KLICK MICH! </a> </main> <div class="footer"> <small>coded with love by https://heinzlehner.ch</small> </div> </body> </html>
style.scss
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); $ff_text: 'Inconsolata', sans-serif; $ff_header: 'Lato', sans-serif; $height_header: 80px; $height_footer: 40px; $bt_background_hover_blue: #4aa0e6; $bt_text_color_blue: #186ca3; $bt_text_color_hover_blue: #132636; $bt_background_hover_green: #4ae652; $bt_text_color_green: #18a33b; $bt_text_color_hover_green: #143613; * { padding: 0; margin: 0; } body { background: #091e30; .header { font-family: $ff_header; color: aliceblue; text-align: center; font-size: 2em; height: $height_header; } .footer { font-family: $ff_header; color: aliceblue; text-align: center; height: $height_footer; } main { display: flex; justify-content: center; align-items: center; font-family: $ff_text; min-height: calc(100vh - #{$height_footer} - #{$height_header}); a.btBlue { position: relative; display: inline-block; padding: 15px 30px; color: $bt_text_color_blue; text-transform: uppercase; letter-spacing: 4px; font-size: 1.5em; text-decoration: none; overflow: hidden; transition: 0.2; span { position: absolute; display: block; } span:nth-child(1) { top:0; left:-100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, $bt_background_hover_blue); } span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, $bt_background_hover_blue); } span:nth-child(3) { bottom:0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, $bt_background_hover_blue); } span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, $bt_background_hover_blue); } } a:hover.btBlue{ color: $bt_text_color_hover_blue; background: $bt_background_hover_blue; box-shadow: 0 0 10px $bt_background_hover_blue, 0 0 40px $bt_background_hover_blue, 0 0 100px $bt_background_hover_blue; transition-delay: 0.4s; span:nth-child(1) { left: 100%; transition: 0.3s; } span:nth-child(2) { top: 100%; transition: 0.3s; transition-delay: 0.1s; } span:nth-child(3) { right: 100%; transition: 0.3s; transition-delay: 0.2s; } span:nth-child(4) { bottom: 100%; transition: 0.3s; transition-delay: 0.3s; } } a.btGreen { position: relative; display: inline-block; padding: 15px 30px; color: $bt_text_color_green; text-transform: uppercase; letter-spacing: 4px; font-size: 1.5em; text-decoration: none; overflow: hidden; transition: 0.2s; span { position: absolute; display: block; } span:nth-child(1) { top:0; left:-100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, $bt_background_hover_green); } span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, $bt_background_hover_green); } span:nth-child(3) { bottom:0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, $bt_background_hover_green); } span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, $bt_background_hover_green); } } a:hover.btGreen{ color: $bt_text_color_hover_green; background: $bt_background_hover_green; box-shadow: 0 0 10px $bt_background_hover_green, 0 0 40px $bt_background_hover_green, 0 0 100px $bt_background_hover_green; transition-delay: 0.4s; span:nth-child(1) { left: 100%; transition: 0.3s; } span:nth-child(2) { top: 100%; transition: 0.3s; transition-delay: 0.1s; } span:nth-child(3) { right: 100%; transition: 0.3s; transition-delay: 0.2s; } span:nth-child(4) { bottom: 100%; transition: 0.3s; transition-delay: 0.3s; } } } }
style.css (falls ohne SASS gearbeitet wird)
@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); * { padding: 0; margin: 0; } body { background: #091e30; } body .header { font-family: "Lato", sans-serif; color: aliceblue; text-align: center; font-size: 2em; height: 80px; } body .footer { font-family: "Lato", sans-serif; color: aliceblue; text-align: center; height: 40px; } body main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Inconsolata", sans-serif; min-height: calc(100vh - 40px - 80px); } body main a.btBlue { position: relative; display: inline-block; padding: 15px 30px; color: #186ca3; text-transform: uppercase; letter-spacing: 4px; font-size: 1.5em; text-decoration: none; overflow: hidden; -webkit-transition: 0.2s; transition: 0.2s; } body main a.btBlue span { position: absolute; display: block; } body main a.btBlue span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: -webkit-gradient(linear, left top, right top, from(transparent), to(#4aa0e6)); background: linear-gradient(90deg, transparent, #4aa0e6); } body main a.btBlue span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#4aa0e6)); background: linear-gradient(180deg, transparent, #4aa0e6); } body main a.btBlue span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: -webkit-gradient(linear, right top, left top, from(transparent), to(#4aa0e6)); background: linear-gradient(270deg, transparent, #4aa0e6); } body main a.btBlue span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#4aa0e6)); background: linear-gradient(360deg, transparent, #4aa0e6); } body main a:hover.btBlue { color: #132636; background: #4aa0e6; -webkit-box-shadow: 0 0 10px #4aa0e6, 0 0 40px #4aa0e6, 0 0 100px #4aa0e6; box-shadow: 0 0 10px #4aa0e6, 0 0 40px #4aa0e6, 0 0 100px #4aa0e6; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } body main a:hover.btBlue span:nth-child(1) { left: 100%; -webkit-transition: 0.3s; transition: 0.3s; } body main a:hover.btBlue span:nth-child(2) { top: 100%; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } body main a:hover.btBlue span:nth-child(3) { right: 100%; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } body main a:hover.btBlue span:nth-child(4) { bottom: 100%; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } body main a.btGreen { position: relative; display: inline-block; padding: 15px 30px; color: #18a33b; text-transform: uppercase; letter-spacing: 4px; font-size: 1.5em; text-decoration: none; overflow: hidden; -webkit-transition: 0.2; transition: 0.2; } body main a.btGreen span { position: absolute; display: block; } body main a.btGreen span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: -webkit-gradient(linear, left top, right top, from(transparent), to(#4ae652)); background: linear-gradient(90deg, transparent, #4ae652); } body main a.btGreen span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#4ae652)); background: linear-gradient(180deg, transparent, #4ae652); } body main a.btGreen span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: -webkit-gradient(linear, right top, left top, from(transparent), to(#4ae652)); background: linear-gradient(270deg, transparent, #4ae652); } body main a.btGreen span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#4ae652)); background: linear-gradient(360deg, transparent, #4ae652); } body main a:hover.btGreen { color: #143613; background: #4ae652; -webkit-box-shadow: 0 0 10px #4ae652, 0 0 40px #4ae652, 0 0 100px #4ae652; box-shadow: 0 0 10px #4ae652, 0 0 40px #4ae652, 0 0 100px #4ae652; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } body main a:hover.btGreen span:nth-child(1) { left: 100%; -webkit-transition: 0.3s; transition: 0.3s; } body main a:hover.btGreen span:nth-child(2) { top: 100%; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } body main a:hover.btGreen span:nth-child(3) { right: 100%; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } body main a:hover.btGreen span:nth-child(4) { bottom: 100%; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } /*# sourceMappingURL=styles.css.map */