HTML
<div class="wrap">
<button class="button">Submit</button>
</div>

CSS
html, body {
height: 100%;
}

.wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.button {
min-width: 300px;
min-height: 60px;
font-family: 'Nunito', sans-serif;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1.3px;
font-weight: 700;
color: #313133;
background: #4FD1C5;
background: linear-gradient(90deg, rgba(129,230,217,1) 0%,rgba(79,209,197,1) 100%);
border: none;
border-radius: 1000px;
box-shadow: 12px 12px 24px rgba(79,209,197,.64);
transition: all 0.3s ease-in-out 0s;
cursor: pointer;
outline: none;
position: relative;
padding: 10px;
}

button::before {
content: '';
border-radius: 1000px;
min-width: calc(300px + 12px);
min-height: calc(60px + 12px);
border: 6px solid #00FFCB;
box-shadow: 0 0 60px rgba(0,255,203,.64);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .3s ease-in-out 0s;
}

.button:hover, .button:focus {
color: #313133;
transform: translateY(-6px);
}

button:hover::before, button:focus::before {
opacity: 1;
}

button::after {
content: '';
width: 30px; height: 30px;
border-radius: 100%;
border: 6px solid #00FFCB;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
animation: none;
display: none;
}

@keyframes ring {
0% {
width: 30px;
height: 30px;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}

HTML
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon button
</a>

CSS
a {
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover {
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
span:nth-child(1){
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#2196f3);
}
a:hover span:nth-child(1){
left: 100%;
transition: 1s;
}
span:nth-child(3){
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#2196f3);
}
a:hover span:nth-child(3){
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#2196f3);
}
a:hover span:nth-child(2){
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#2196f3);
}
a:hover span:nth-child(4){
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}

HTML
<div class="icons">
<i class="fab fa-instagram icon" id="insta" aria-hidden="true"></i>
<i class="fab fa-tiktok icon" id="tiktok" aria-hidden="true"></i>
<i class="fab fa-whatsapp icon" id="num" aria-hidden="true"></i>
</div>

CSS
.icon{
display: inline-block;
animation: animated 5s ease-in-out infinite;
color: #fff;
right: 0;
cursor: pointer;
font-size: 1.3em;
transition: 0.3s;
}
#insta{
animation-delay: 1s;
}
#tiktok{
animation-delay: 2s;
}
@keyframes animated {
0%
{
transform: translateY(0);
}
50%
{
transform: translateY(-15px);
}
100%
{
transform: translateY(0);
}
}

HTML
<div class="container">
<div class="card">
<div class="icon">
<img src="#">
</div>
<div class="icon back">
<i id="i" class="fab fa-tiktok" aria-hidden="true"></i>
<i id="i" class="fab fa-youtube" aria-hidden="true"></i>
<i id="i" class="fab fa-instagram" aria-hidden="true"></i>
</div>
</div>
</div>

CSS
.container{
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card{
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover{
transform: rotateY(180deg);
}
.card .icon{
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back{
background: #eaeaed;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
font-size: 1.2em;
margin: 0 15px
}

HTML
<div class="box">
<i class="fab fa-apple logo" aria-hidden="true"></i>
</div>
<script src="https://kit.fontawesome.com/95a02bd20d.js"></script>


CSS
body{
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
position : relative ;
color : #fff ;
font-size : 5em ;
text-shadow : 0 0 50px #0f0,
0 0 100px #0f0,
0 0 150px #0f0,
0 0 200px #0f0,
0 0 250px #0f0;
animation: animate 5s linear infinite;
}
@keyframes animate
{
0%
{
filter: hue-rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
}
}

HTML
<label>
<input type="checkbox">
<span class="btn"></span>
<i id="icon" class="fa fa-power-off" aria-hidden="true"></i>
</label>

CSS
body{
display: flex;
}
label{
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
}

label .btn{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1b1b1b;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 1),
inset 0 -2px 5px rgba(0, 0, 0, 1),
0 0 0 2px #000,
0 0 0 5px #0c0c0c,
inset 0 2px 2px rgba(255, 255, 255, 0.5),
0 0 0 5.5px #080808;
}


label input[type="checkbox"]:checked ~ .btn{
box-shadow: 0 0 0 rgba(0, 0, 0, 1),
inset 0 1px 1px rgba(255, 255, 255, 0.1),
0 0 0 2px #000,
0 0 0 5px #0c0c0c,
inset 0 -2px 5px rgba(0, 0, 0, 1),
0 0 0 5.5px #00a1ff;
}
label input[type="checkbox"]{
-webkit-appearance : none;
}

label .fa{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
color: #0c0c0c;
}
label input[type="checkbox"]:checked ~ #icon{
color: #00ffe7;
text-shadow: 0 0 15px #00a1ff,
0 0 30px #00a1ff;
}

HTML
<label>
<input type="checkbox">
<span></span>
<i class="indicator"></i>
</label>
<label>
<input type="checkbox" checked>
<span></span>
<i class="indicator"></i>
</label>

CSS
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #2b2b2b;
}
label{
position: relative;
margin: 5px 0;
cursor: pointer;
}
label input{
appearance: none;
display: none;
}
label span{
position: relative;
display: block;
width: 80px;
height: 40px;
background: #222;
border-radius: 40px;
box-shadow: inset 0 2px 15px rgba(0,0,0,0.2),
inset 0 2px 2px rgba(0,0,0,0.2),
inset 0 -1px 1px rgba(0,0,0,0.2);
}
label .indicator{
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: linear-gradient(to bottom, #444, #222);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.5),
inset 0 1px 1px rgba(255,255,255,0.1);
transition: 0.5s;
transform: scale(0.9);
}
label input:checked ~ .indicator{
left: 40px;
}
label .indicator::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
background: #f00;
border-radius: 50%;
transition: 0.5s;
box-shadow: 0 0 2px #f00,
0 0 5px #f00,
0 0 10px #f00,
0 0 15px #f00,
0 0 20px #f00,
0 0 25px #f00,
0 0 30px #f00,
0 0 40px #f00;
}
label input:checked ~ .indicator::before{
background: #0f0;
box-shadow: 0 0 2px #0f0,
0 0 5px #0f0,
0 0 10px #0f0,
0 0 15px #0f0,
0 0 20px #0f0,
0 0 25px #0f0,
0 0 30px #0f0,
0 0 40px #0f0;
}

HTML
<div class="icons">
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-instagram"></span>
</div>
</a>
<a href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-youtube"></span>
</div>
</a>
</div>

CSS
.icons{
display: inline-flex;
}
.icons a{
margin: 0 14px;
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
.icons a .layer{
width: 55px;
height: 55px;
transition: transform 0.3s;
}
.icons a:hover .layer{
transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #fff;
border-radius: 5px;
transition: all 0.3s;
}
.icons a .layer span.fab{
font-size: 30px;
line-height: 55px;
text-align: center;
}
.icons a:hover .layer span:nth-child(1){
opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
opacity: 0.4;
transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
opacity: 0.6;
transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
opacity: 0.8;
transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
opacity: 1;
transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(2){
color: #2fa7f1;
border-color: #2fa7f1;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2){
color: #ec467f;
border-color: #ec467f;
}
.icons a:hover:nth-child(1) .layer span{
box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:hover:nth-child(2) .layer span{
box-shadow: -1px 1px 3px #E1306C;
}
.icons a .text{
position: absolute;
left: 50%;
bottom: -5px;
opacity: 0;
font-weight: 500;
transform: translateX(-50%);
transition: bottom 0.3s ease, opacity 0.3s ease;
}