<div class="container">

        <h1>Mémos Dev Web</h1>
        <section>
            <h2 class="btn btn__sass">Sass</h2>
            <h2 class="btn btn__html">HTML5</h2>
            <h2 class="btn btn__css">CSS3</h2>
            <!-- Coming soon : 
            <h2>JavaScript</h2>
            <h2>jQuery</h2>
            <h2>React</h2> -->
        </section>
    </div>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
@charset "UTF-8";
/************************************************************
Fichier : style.scss
Theme name : Liquid Neon Buttons
Description: buttons néon remplissage
Author: Shay Reichert
Version: 1.0
Tags: fx, effects, boutons, hover
**************************************************************

Table of Contents:

0. Import (fonts, sass...)
1. GENERALES
2. SECTIONS
3. BUTTONS

**************************************************************/
/************************************************
0.	Import
************************************************/
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
/************************************************
1.	GENERALES
************************************************/
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Questrial", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  color: white;
  background: black; }

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 90px; }

h1 {
  font-size: 50px;
  margin: 40px auto;
  padding: 10px 30px;
  color: grey; }

h2 {
  font-size: 40px;
  padding: 15px 40px;
  border: 2px solid #051c2e;
  border-radius: 5px; }

/************************************************
2.	SECTION
************************************************/
section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly; }

/************************************************
3.	BUTTONS
************************************************/
.btn {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-transition: 100ms 300ms;
  -o-transition: 100ms 300ms;
  transition: 100ms 300ms; }
  .btn:hover {
    border: 2px solid;
    border-radius: 5px; }
  .btn__sass::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: #cf649a;
    z-index: -1;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    bottom: 0;
    border-radius: 40px 40px 0 0;
    -webkit-box-shadow: 0 0 10px #cf649a, 0 0 40px #cf649a, 0 0 80px #cf649a;
            box-shadow: 0 0 10px #cf649a, 0 0 40px #cf649a, 0 0 80px #cf649a; }
  .btn__sass:hover::before {
    height: 180%; }
  .btn__sass:hover {
    -webkit-box-shadow: 0 0 10px #cf649a, 0 0 40px #cf649a, 0 0 80px #cf649a;
            box-shadow: 0 0 10px #cf649a, 0 0 40px #cf649a, 0 0 80px #cf649a; }
  .btn__html::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: #df4b25;
    z-index: -1;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    bottom: 0;
    border-radius: 40px 40px 0 0;
    -webkit-box-shadow: 0 0 10px #df4b25, 0 0 40px #df4b25, 0 0 80px #df4b25;
            box-shadow: 0 0 10px #df4b25, 0 0 40px #df4b25, 0 0 80px #df4b25; }
  .btn__html:hover::before {
    height: 180%; }
  .btn__html:hover {
    -webkit-box-shadow: 0 0 10px #df4b25, 0 0 40px #df4b25, 0 0 80px #df4b25;
            box-shadow: 0 0 10px #df4b25, 0 0 40px #df4b25, 0 0 80px #df4b25; }
  .btn__css::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: #3596cf;
    z-index: -1;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    bottom: 0;
    border-radius: 40px 40px 0 0;
    -webkit-box-shadow: 0 0 10px #3596cf, 0 0 40px #3596cf, 0 0 80px #3596cf;
            box-shadow: 0 0 10px #3596cf, 0 0 40px #3596cf, 0 0 80px #3596cf; }
  .btn__css:hover::before {
    height: 180%; }
  .btn__css:hover {
    -webkit-box-shadow: 0 0 10px #3596cf, 0 0 40px #3596cf, 0 0 80px #3596cf;
            box-shadow: 0 0 10px #3596cf, 0 0 40px #3596cf, 0 0 80px #3596cf; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWxlLmNzcyIsIi4uL3N0eWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQWdCO0FDQWhCOzs7Ozs7Ozs7Ozs7Ozs7OzhERGlCOEQ7QUNDOUQ7O2dEREVnRDtBQ0N4Qyw4RUFBc0U7QUFLOUU7O2dEREZnRDtBQ0toRDtFQUNJLFNBQVM7RUFDVCxVQUFVO0VBQ1YsaUJBQWlCO0VBQ2pCLDhCQUFzQjtVQUF0QixzQkFBc0I7RUFDdEIsbUZBQW1GO0VBQ25GLFlBQVk7RUFDWixpQkFBaUIsRUFBQTs7QUFFckI7RUFDSSxvQkFBYTtFQUFiLG9CQUFhO0VBQWIsYUFBYTtFQUNiLDRCQUFzQjtFQUF0Qiw2QkFBc0I7TUFBdEIsMEJBQXNCO1VBQXRCLHNCQUFzQjtFQUN0QixnQkFBZ0IsRUFBQTs7QUFHcEI7RUFDSSxlQUFlO0VBQ2YsaUJBQWlCO0VBQ2pCLGtCQUFrQjtFQUNsQixXQUFXLEVBQUE7O0FBR2Y7RUFDSSxlQUFlO0VBQ2Ysa0JBQWtCO0VBQ2xCLHlCQUF5QjtFQUN6QixrQkFBa0IsRUFBQTs7QUFHdEI7O2dERExnRDtBQ1FoRDtFQUNJLG9CQUFhO0VBQWIsb0JBQWE7RUFBYixhQUFhO0VBQ2IsOEJBQW1CO0VBQW5CLDZCQUFtQjtNQUFuQix1QkFBbUI7VUFBbkIsbUJBQW1CO0VBQ25CLG1CQUFlO01BQWYsZUFBZTtFQUNmLDhCQUE2QjtNQUE3QiwyQkFBNkI7VUFBN0IsNkJBQTZCLEVBQUE7O0FBR2pDOztnREROZ0Q7QUNVaEQ7RUFDSSxlQUFlO0VBQ2Ysa0JBQWtCO0VBQ2xCLGdCQUFnQjtFQUNoQiwrQkFBdUI7RUFBdkIsMEJBQXVCO0VBQXZCLHVCQUF1QixFQUFBO0VBQ3ZCO0lBQ0ksaUJBQWlCO0lBQ2pCLGtCQUFrQixFQUFBO0VBS3RCO0lBQ0ksV0FBVztJQUNYLGtCQUFrQjtJQUNsQixPQUFPO0lBQ1AsV0FBVztJQUNYLFVBQVU7SUFDVixtQkFwRVk7SUFxRVosV0FBVztJQUNYLHdCQUFnQjtJQUFoQixtQkFBZ0I7SUFBaEIsZ0JBQWdCO0lBQ2hCLFNBQVM7SUFDVCw0QkFBNEI7SUFDNUIsd0VBQTRFO1lBQTVFLGdFQUE0RSxFQUFBO0VBRWhGO0lBQ0ksWUFBWSxFQUFBO0VBRWhCO0lBQ0ksd0VBQTRFO1lBQTVFLGdFQUE0RSxFQUFBO0VBS2hGO0lBQ0ksV0FBVztJQUNYLGtCQUFrQjtJQUNsQixPQUFPO0lBQ1AsV0FBVztJQUNYLFVBQVU7SUFDVixtQkF6Rlk7SUEwRlosV0FBVztJQUNYLHdCQUFnQjtJQUFoQixtQkFBZ0I7SUFBaEIsZ0JBQWdCO0lBQ2hCLFNBQVM7SUFDVCw0QkFBNEI7SUFDNUIsd0VBQTRFO1lBQTVFLGdFQUE0RSxFQUFBO0VBRWhGO0lBQ0ksWUFBWSxFQUFBO0VBRWhCO0lBQ0ksd0VBQTRFO1lBQTVFLGdFQUE0RSxFQUFBO0VBS2hGO0lBQ0ksV0FBVztJQUNYLGtCQUFrQjtJQUNsQixPQUFPO0lBQ1AsV0FBVztJQUNYLFVBQVU7SUFDVixtQkE5R1c7SUErR1gsV0FBVztJQUNYLHdCQUFnQjtJQUFoQixtQkFBZ0I7SUFBaEIsZ0JBQWdCO0lBQ2hCLFNBQVM7SUFDVCw0QkFBNEI7SUFDNUIsd0VBQXlFO1lBQXpFLGdFQUF5RSxFQUFBO0VBRTdFO0lBQ0ksWUFBWSxFQUFBO0VBRWhCO0lBQ0ksd0VBQXlFO1lBQXpFLGdFQUF5RSxFQUFBIiwiZmlsZSI6InN0eWxlLmNzcyJ9 */
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js