Facebook SDK

Hello Coders, In this article, We are going to learn how to create Glowing Neon Buttons using HTML and CSS. Before that, there are some things about which you need to know. So lets get started.

What is Google Fonts?

For this project we will be using a custom font from Google Fonts i.e Raleway. If you don't know what google fonts is, here is a short introduction to it. Google Fonts is a library which contains more than thousand font families which we can use in our projects. All the fonts provided by the google fonts are completely free and open source.

What are KeyFrames?

So what are keyframes? CSS allows animations of the HTML elements without using JavaScript. Using keyframes we can add animations to our HTML elements. As you can see in the demo Image below that the border of the buttons is actually circling around. That animation is added with keyframes. You can read more about keyframes here.

What is FlexBox?

CSS3 FlexBox is used to make the elements adjust themselves when they are used in different display Screens or devices.

So this was all you should know before continuing with this project. You can have a look at the demo below so that you know what you will be building at the end.

Glowing Neon Buttons in HTML and CSS | Video Tutorial :

Consider watching the video tutorial if you find it hard to follow along with this article and if you are a complete beginner. In the video tutorial above, I have shown how to create glowing neon buttons step by step.

Glowing Neon Buttons Hover Effect in HTML and CSS | Source Code

Okay lets start building it. Follow along with this step by step tutorial article to build this glowing hover effect for buttons. We will also be adding some animation around the borders using keyframes. You can also download complete source code from download button at the bottom.

How to create glowing neon buttons in HTML? Free HTML Glowing Neon Buttons source code
Create an index.html file and start following the step by step guide to build glowing neon buttons using html and css.

Step 1 : Inside the index.html we are gonna define three anchor tags (<a>) each having 4 span tags (<span>).

How to design glowing neon buttons in CSS? Free CSS Glowing Neon Buttons source code  
Create a styles.css file and don't forget to link the file to your index.html file. once done continue with the below steps.

Step 2 : Lets move on to the main part. That is adding styles to the code. So, in the first part we are going to import a custom font from the google fonts, that is we will be importing Raleway font with weight 400 & 700 and reset the default browser styles.

Step 3 : Once done, Now lets add the main styles. First lets target the body and make everything to align center and setting the background color to black. We will also define the font family which we already imported in the first step.

How to create button hover effect in CSS? CSS Source Code
By adding hover effect to the buttons, we can make them glow when we place cursor or hover on button. Follow below step to know how to add it.

Step 4 : Now its time to style those anchor tags and add the hover property to it. We will also define different colors for each anchor tags by using the filter and rotating the hue.

Step 5 : We are done with styling the anchor tags and making them glowing neon buttons. Now its time to add the animation around those buttons which rotates around those buttons. Observe the final demo. 

    Remember we created 4 span tags in the beginning. We will target them individually by saying ( a span:nth-child(1) ) and so on. It is used to select the child elements which are inside of the anchor tags. Now we have 4 span tags, we will select each one of them and add keyframe animations.

Its done. You have completed building Glowing Neon Buttons using HTML and CSS. After completing this is what you should be having.

Final Demo of Glowing Neon Buttons :

Glowing Neon Buttons

Thank you for reading this article.

Credits : Pranjal Bhadu

You can download the complete source code from below link and if you are facing any problems while building this, let me know in the comments.

Download Code Files

6 Comments

  1. I didnt get the animation working bro!
    the span element is not moving for me
    but i used the same code.
    any solution for this

    ReplyDelete
    Replies
    1. 1) Check if you have selected the correct span with nth child
      2) Check if you have miss spelled the keyframe animation name

      Delete
  2. i dont know why but im unable to centre my buttons on the screen,any assistance please

    ReplyDelete

Post a Comment

Previous Post Next Post