Raj Template

Neumorphism Social Media Buttons are much more beautiful than ordinary button designs. You can make this type of design using only HTML and CSS. In this article, I am going to show how CSS  Neumorphism social media buttons are created using HTML and CSS code. Earlier I showed the design of many more types of social media buttons using Neumorphism design. Neumorphism is a phenomenal UI trend that is currently being used to create a variety of elements. Such designs are much more attractive and much easier to make. These are basically made using a box-shadow of CSS code.  There are two types of Neumorphism designs , one is dark and the other is light. In this case, I have made light Neumorphism social media buttons. Social media buttons are used in different places so that the user can share the content in his social account. CSS Neumorphism Social Media Buttons [Live Demo]  Below I have given a live demo that will help you understand how this CSS Neumorphism social m...

In this article, I will show you how to create a Neumorphism login form UI design . We all know that the login form plays an important role in any website. Basically, we face the login form to access the account on different websites. Where we can log in to our account with a username and password.  Neumorphism is currently a very popular UI trend that is being used extensively to create a variety of web elements. This type of design is more beautiful than ordinary design and it is much easier to make.  This Neumorphism login form I created only with HTML and CSS code. Here is the complete color of the background color and the color of the web element. Basically, in this type of design, the background color of the web page and the element is completely the same. However, in this case, some shadows are created using CSS code which determines the size of these elements.  I put everything here like a normal login form . First of all, I added a title then there is no pla...

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you...

Responsive navigation menu bar plays an important role for every website. The navigation menu bar creates user satisfaction with the beauty of the website. The user needs a responsive navbar so that he can easily find the topic of his choice.  I have designed many more types of menubars before. But in that case, I used JavaScript code to execute the menu button. I have not used any JavaScript or external JavaScript library for this design. I have created this Responsive Navigation menu bar using pure CSS and HTML code. I only used CSS code to make it responsive. I have made it responsive using only the  @media function of CSS code. Here I have basically used a logo and used five menu items . I have used the hover effect on the menu links. The background color will change when you click on those items or move the mouse. Video Tutorial of Responsive Navigation Menu Bar You can watch the video tutorial below to know how it works and how to make it. How T...

Here you will learn how to create Sidebar Menu using Only HTML and CSS. I have created many more sidebar menus but in that case, I have used JavaScript code to make it work. In this case, I did not use any JavaScript or external library.  I have designed the menu on this site using pure HTML and CSS code. Normally it is completely hidden and a small button is found on the home page. When you click on that button, we see the full sidebar menu .  In this case, I have used the profile image to complete it. I also used icons with each menu item.  In this case, instead of JavaScript, I have implemented this HTML sidebar menu  using the checkbox function of HTML code. As I said under normal conditions only we can see a small button. When you click on that button, the full sidebar will appear. This sidebar has a small cancel button which, when clicked, will completely hide the menu bar again. Video Tutorial of Side Navigation Menu If you do not understand what ...