<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
This Pen doesn't use any external CSS resources.