Create Glowing Neon Button For Website
Glowing Neon Button For Website.Animated Glowing Neon Button Codes Given Bellow Html, CSS and JavaScript Codes Past To Your Website Html Source where you What To Show Menubar and Create Beautiful Website Design.
- Inline styles — Using the style attribute in the HTML start tag.
- Embedded styles — Using the <style> element in the head section of a document.
- External style sheets — Using the <link> element, pointing to an external CSS file.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.
Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document.
Glowing Neon Button Html Code
Glowing Neon ButtonCSS Code
Glowing Neon Button
Glowing Neon Button HTML
Glowing Neon Button css
Simple Blinking Neon Button
Create Simple Blinking Neon Button For Website With Html And CSS Codding
Simple Blinking Neon Button HTML
<div class="container">
<a href="">Neon button</a>
</div>
Simple Blinking Neon Button CSS
<style>
html,
body {
height: 100%;
width: 100%;
background-color: #021946;
}
.container {
height: 100%;
display: flex;
align-items: center;
}
a {
display: block;
margin: auto;
padding: 1rem 1.25rem;
font-family: sans-serif;
font-size: 1.5rem;
text-decoration: none;
text-shadow:
-2px 4px 4px #091243,
0 0 10px #00D0FF,
inset 1px 1px 1px white;
color: #1FFFFF;
border: 2px solid;
border-radius: 4px;
background-color: transparent;
box-shadow:
0 1px 2px rgba(0,0,0, 0.6),
2px 1px 4px rgba(0,0,0, 0.3),
2px 4px 3px rgba(3,0,128, 0.3),
0 0 7px 2px rgba(0,208,255, 0.6),
inset 0 1px 2px rgba(0,0,0, 0.6),
inset 2px 1px 4px rgba(0,0,0, 0.3),
inset 2px 4px 3px rgba(3,0,128, 0.3),
inset 0 0 7px 2px rgba(0,208,255, 0.6);
animation: flickering 5s infinite;
}
@keyframes flickering {
0% {
border-color: transparent;
opacity: 0.2;
}
2% {
border-color: #1FFFFF;
opacity: 1;
}
4% {
border-color: transparent;
opacity: 0.2;
}
8% {
border-color: #1FFFFF;
opacity: 1;
}
28% {
border-color: #1FFFFF;
opacity: 1;
}
30% {
border-color: transparent;
opacity: 0.2;
}
36% {
border-color: #1FFFFF;
opacity: 1;
}
100% {
border-color: #1FFFFF;
opacity: 1;
}
}
</style>
Mouse Hover Blinking Neon Button
Bellow Given HTML and CSS Code For Blinking Neon Button When mouse Move On The Button it Start Blinking With Neon Glowing Effect
Blinking Neon Button HTML
<button class="btn" id="neon-text">Neon Button</button>
Blinking Neon Button CSS
<style>
@import 'https://fonts.googleapis.com/css?family=Dosis';
/* VARS */
$main-font-size: 10px;
$bg-color: #1A1A1B;
$red: #cb3535;
$white: #fcfcfc;
$red-neon-0: rgba(204, 0, 0, 1);
$red-neon-1: rgba(204, 0, 0, 0.3);
$red-neon-2: rgba(255, 0, 0, 0.3);
$red-neon-3: rgba(204, 0, 0, 0.3);
$blue: #68939c;
/* MIXINS */
// Font sizing
@mixin font-size($sizeValue) {
$remValue: $sizeValue;
$pxValue: ($sizeValue * 10);
font-size: $pxValue + px;
line-height: ($sizeValue * 1.5 * 10) + px;
font-size: $remValue + rem;
line-height: $sizeValue * 1.5 + rem;
}
@mixin x-rem ($property, $value) {
#{$property}: $value * $main-font-size;
#{$property}: #{$value}rem;
}
@mixin btn($color, $bg:none) {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-color: transparent;
background-image: $bg;
background-repeat: no-repeat;
background-position: 18px center;
border: 1px solid $red;
white-space: nowrap;
outline: none;
color: $color;
@include font-size(1.6);
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
font-weight: 300;
width: auto;
white-space: pre-wrap;
@if $bg == none {
padding: 10px 1.8em;
} @else {
padding: 10px 18px 10px 50px;
}
transition: all 0.3s ease;
-webkit-appearance: none;
-webkit-border-radius: 0;
@media (min-width: 480px) { width:auto; }
&:hover {
animation: intermittente 0.01s infinite alternate;
box-shadow: 0px 0px 35px $red-neon-1,
0 0 11px $red-neon-1,
0 0 2px $red-neon-2,
0 0 1px $red-neon-3,
0 0px 17px $red-neon-1,
inset 0px 0 17px $red-neon-3,
inset 0px 0 30px $red-neon-3;
}
}
/* ANIMATIONS */
@keyframes intermittente {
75%{
opacity: 0.7;
}
}
body {
background-color: $bg-color;
}
.btn {
@include btn($blue);
font-family: 'Dosis', sans-serif;
position: absolute;
top: 50%;
left:50%;
transform: translate3d(-50%,-50%,0);
}
</style>
Post a Comment