Heinz Lehner

Webdesign & Entwicklung

Neon Light Button mit Hover Effekt

Neon Light Button mit Hover Effekt

Live Vorschau
In diesem Tutorial erstellen wir zusammen coole Neonlicht Buttons mit Effekten. Wir setzen dies mit Visual Studio Code und mit SASS um.

Anleitung

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 */

 

Kontakt:

info@heinzlehner.ch
+41 78 727 03 86

Facebook
Youtube
Linkedin

Ich arbeite mit ehrgeizigen Menschen und Unternehmen zusammen; lassen Sie uns gemeinsam etwas Grossartiges aufbauen.