Showing posts with label htmlcss. Show all posts
Showing posts with label htmlcss. Show all posts

Friday, June 25, 2021

Create Desktop App with HTML/CSS/JS - Electron Tutorial 2021

Coding INDIA






Hello readers, Today in this blog you’ll learn how to create Desktop App with HTML/CSS/JS - Electron Tutorial 2021


Video Tutorial of create desktop app with html



Your create desktop app with html

 [Source Codes]

Please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.


Thursday, June 3, 2021

CSS Magic Line Icon Fill Hover Effects | Social Media Buttons

Coding INDIA

 



Hello readers, Today in this blog you’ll learn how to create  CSS Magic Line Icon  Social Media Buttons using only HTML & CSS. 


The Social Media Links and Buttons let your website visitors and content viewers to easily share your content with their preferred social media connections and networks. Adding these buttons or links to your content allows you to expand the reach of your content to new audiences and make new visitors back to your website.


In this program (CSS Magic Line Icon Fill Hover Effects | Social Media Buttons), on the webpage, there are four different social media networks buttons – Facebook, Twitter, Instagram, and YouTube with their icon or logo and when you click on a particular button, the button is clicked with hover visualization which makes these buttons more attractive. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS Magic Line Icon Fill Hover Effects | Social Media Buttons).


Video Tutorial of 3D Social Media Buttons


  



In the video, you have seen the hover effect Click Effect on Social Media Buttons and I hope you’ve understood the basic codes behind creating these buttons and their hover effect too. This is a pure CSS program that means I used only HTML & CSS so if you’re a beginner then you can also create these types of buttons and effects.


You can add <a href=”your site URL here”> tag inside each button to redirect the user to your particular preferred social network site/account on button click. You can easily get the source codes of this program (CSS Magic Social Media Buttons). To get the source codes you just need to scroll down. You can use these Social Media Buttons in your HTML pages, websites, and projects.

You might like this:

CSS Magic Line Icon Fill Hover Effects | Social Media Buttons [Source Codes]

Please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.







Wednesday, May 19, 2021

Animated Login Form using HTML CSS | Glass morphism - CodingINDIA

Coding INDIA

 


 

Hello readers, Today in this blog you’ll learn how to create an Animated Login Form using HTML CSS with Glass morphism effect . I am posting blogs on how to create a login form but now it’s time to create an Animated Login Form in one page.

In this program (Animated Login Form Design), on the webpage.
In this form, the login form on webpage. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program ( Animated Login Form using HTML CSS | Glass morphism).

Video Tutorial of Animated Login Form Design





In the video, you have seen an animated login form and I hope you’ve understood the basic codes behind creating this program.so if you’re a beginner, then you can easily create this type of login form.



If you like this program (Animated Login Form Design) and want to get source codes. You can easily get the source codes of this program.



Animated Pricing Card UI Design using only HTML & CSS

Coding INDIA

              




Hey friends, today in this blog you’ll learn how to create a Pricing Card with Animation using only HTML & CSS. In the video, I am showing  and now it’s time to create a Pricing Card. 


pricing card is a design element on a commercial website to display the various pricing plans, subscriptions, or price comparisons.


In our design [Pure CSS Pricing Card], there is a card as you can see in the preview image above. In this card, there is a total of 3 packages, and you can view each package with the help of a clicking on them. When you click on the particular tab, the particular package will appear with a sliding animation which makes this pretty cool.


If you are confusing about how this card slide to show it other packages or how it is created using only HTML & CSS then you can watch a video tutorial of this Pricing Card with Animation.


Video Tutorial of Animated Pricing Card UI Design

                                


In the video, you have seen how this card looks like, its animation, and how it is created using HTML & CSS only. As I already told you, this is a pure CSS card and its animation is also done by using only HTML & CSS.


                                                
   

You might like this :


Animated Pricing Card Design [Source Codes]

Please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.