ChatGPT if properly used can tremendously improvise the productivity of any software developer. In this article, we will look at how to use ChatGPT to create a website using the HTML and CSS code generated from chat GPT.

You can also join a lot of AI and ML developer communities such as Goom or Hugging face to learn more from peers on how to AI tools such as ChatGPT or GPT 3 to improve productivity.

How to use ChatGPT to create HTML and CSS and website code

ChatGPT can pretty much create the HTML and CSS of the website provided proper prompts are given by the developer.

Prompts

It is very important to give a proper prompt to get the required outputs. Let’s look at some of the prompts

Prompt if you want to need HTML and CSS for the Landing page for lead conversion.

Prompt 1: “Give Landing page HTML and CSS with the bootstrap framework that takes the email address and phone number in the lead generation form”

Below is the response from the ChatGPT AI bot for the above prompt which I believe is pretty good.

Prompt if you need HTML and CSS for Home Page carousal

Prompt 2: “Give an HTML and CSS code with a tailwind for Carousel that takes 50% of the page vertical space ”

Response from ChatGPT AI bot for the above prompt which I believe is pretty decent as below.

Prompt if you need HTML and CSS to import Data from excel and show it in the tabular format

Prompt 3: “Give an HTML and CSS code that display the table with the column’s name, date, and number”

Now, you can copy the HTML and CSS and tweak it for your use case or you can also ask follow-up questions by tweaking the prompt for your particular use case

ChatGPT is an amazing tool and as a developer, if used properly, it will improve your productivity by 10x. Go a head and play around and its completely free.

Since WordPress is a software that has thousands of plugins and customization options – it also has quite a lot of them that are dedicated to Social Media Sharing. 

 If you want to check if the Social Media or Blog content is generated using AI or ChatGPT? Click Here

In this article, we’ll be having a look at the Top 8 WordPress Plugins for Social Media Sharing

Best Social Share WordPress Plugins

Grow Social ( Formerly known as Social Pug )

This plugin is probably one of the easiest to use & setup on this list. It supports almost all of the major social networking sites and also has a sharing counter.

Here’s a list of the main features of this plugin

1. Floating Sidebar and Custom Placement of Icons

Using this plugin, you can place your Social Media buttons almost anywhere imaginable. This is especially useful if your website has a custom design that requires the social media buttons to be placed somewhere with easy reach.

2. 10+ Social Media Sites using the Premium Version

The premium version of this plugin has support for all of these social media networks: Reddit, VK, Yummly, WhatsApp, Buffer, Telegram, Flipboard, Pocket, Tumblr and Email

Spotlight for Instagram

Almost any successful business / blog has a great social media presence. Spotlight is one such plugin that focuses mainly on bringing live Instagram Feed to your website.

This allows your customers to get to know your instagram better and connect with the social media content that you post. This in turn can even convert website visitors into instagram followers.

Here are the main features of this plugin

1. Sharing Instagram Content to Non-Instagram Users

        It is not a secret that instagram doesn’t allow users to view posts without having created an instagram account. Even if it does, it’s mostly just a few recent posts with constant & irritating pop ups to create an account.

2. Customize the Design of your Instagram Feed

Unlike a traditional Instagram Embed that has a similar design to their website, this plugin allows you to customize the feed so that it matches the design language of your website.

Better Click to Tweet

One thing that most people love to tweet about is the Quotes that they read on blogs/articles and this plugin encourages exactly that.

Better Click To Tweet allows users to simply click on any quotes or important points throughout the article, and then instantly tweet them.

Here are the pros of this plugin

1. Most Popular Twitter Plugin out there

        This is definitely the most popular and actively maintained twitter plugin. This means, more and more people are aware of it and there are very less chances of bugs/issues while using this plugin

2. Works with Link Shorteners

        Link Shorteners are very useful if you want to track where the traffic is coming from or just simply use shorter URLs.

This plugin can be configured to redirect users to this website using a short url, and to insert that short url in the tweet.

Shareaholic

Unlike the other plugins on this list Shareaholic is more of an all-in-one solution that supports Ad Monetization, Content Analytics and also Social Share Buttons.

Here are the main features of this plugin

1. Lightweight & Heavily Optimized Plugin

        While most of the social media share plugins add considerable loading time to the website, Shareaholic claims to be using Advanced Code Optimization Techniques such as Selective and Lazy Loading. This also makes sure that the website loads quickly and does not have significant delay / loading time.

2. Supports Hundreds of Social Networks

As of now, Shareaholic supports the following social networking sites

WhatsApp, Facebook share sharing, Twitter sharing, Pinterest sharing, Instagram sharing, Reddit sharing, LinkedIn sharing, Gmail sharing, Delicious sharing, OneNote sharing, Evernote sharing, Stumbleupon sharing, Digg sharing, Tumblr sharing, Hootsuite sharing, Buffer sharing, Fancy sharing, Wanelo sharing, Yummly sharing, WeHeartIt sharing, Flipboard sharing, Printfriendly sharing, Amazon Wishlist sharing, Instapaper sharing, Pocket sharing, Odnoklassniki sharing, Houzz sharing, Hacker News sharing, Inbound.org sharing, Vk sharing.

This is definitely more than what any other social share plugin has to offer. It’s very rare that someone might need to share to any social network not mentioned here.

Sharebar Plugin ( Obsolete )

NOTE: The above plugin is currently CLOSED due to security issues

This is another plugin that has an easy-to-use interface and is also simple to set up. It also supports Share Counts, Responsive User Interfaces and a lot more stuff!

Here is a list of the main features that this plugin supports

1. Automatic Share Bars

        Unless you have a really good memory, it can be hard for most people to remember to add Social Media Share Bars to every single post. That’s why this plugin supports Auto Mode.

If enabled, Auto Mode will automatically insert sharebars into every single post created after that.

2. Customizable Behavior

        By default, this plugin supports Horizontal / Vertical Sharebars depending on the screen size ( 1000px by default ). However this behavior can be completely customized to suit the layout of your website.

Revive Social

Just like all the other plugins on this list, Revive Social also brings something new to the table. This plugin comes in handy particularly for older blogs.

As more and more new content is added to a blog, it overshadows the old content and can reduce the traffic it receives. To help with this problem Revive Social plugin automatically shares a couple of old articles to your social media handles.

This helps in having uniform traffic for all the articles and makes sure that your old content doesn’t just simply go to waste.

Here are a couple of features of this plugin

1. Supports Google Analytics Campaign Tracking

        Revive Social supports statistics from Google Analytics with the help of URL Shorteners and other services.

This allows you to have a look at the real time data and see for yourself as to how your old blog posts are performing. You can then decide what to do with them.

2. Share on Publish

        This plugin can also be configured to automatically share posts instantly on publishing. Which means, it can also improve traffic not only for old posts but also for newer posts

Sassy Social Share

This is among the most popular social share plugins on this list, with more than 100k+ Active Installs and Active Maintenance. Sassy social share supports over 110 Social Networks out of the box and is also optimized for vector icons.

Here are a few features of this plugin

1. GDPR Compliant – Zero Cookies Stored

This plugin makes it easier for websites – especially in the EU to deal with GDPR Compliance. This is because Sassy Social Share does not store any Cookies or Private Data by default.

2. Completely Free Plugin & No Third Party Involved

        Unlike most of the plugins that are either paid or have a third party website involved, this plugin is completely independent & free to use without any bells and whistles.

This is also the reason why this plugin has fast load times and is very lightweight

Social Warfare

This particular plugin comes under the feature-rich category, as it has almost all of the features of the above plugins combined. But the only con is that this is NOT a free Plugin and costs 29$ for ONE website

Whether it is justified to spend 29$ on a social media share plugin totally depends on the type of organization/website you are working for.

Here are a few features of this plugin

1. Pinterest Pin for All Images

        This feature is particularly useful if your website has tons of images and you have a good social media presence on Pinterest.

This plugin automatically adds a small Pin button at the top of every image on the website so that the user can instantly share any image they like on their pinterest page.

2. Share Customization

        This feature allows you to add Custom Text / Hashtags to any share that the user makes using the Share Button on your website.

Using this feature helps if you have a Promotional Message or want to increase the popularity of any hashtag

Conclusion

Choosing the right social media plugin can be a really hard task, especially if you are new to the world of wordpress. Hopefully, after reading this article you have an idea about what all of these plugins have to offer and can choose the one that suits your needs the best.

However, if you are on a strict budget, my recommendation would be to go ahead with the free options and try to make the most out of them and only move on to the paid options once you find the need for them.

If you found this article useful and if it helped you in making your decision, do share it with your friends!

For our purposes, there are two types of overlays. Always Display overlays and Popup Overlays.

1. A Popup Overlay – just like the name sounds, appears as a screen popup only when some user action happens ( for eg, submitting a form )
2. An Always Display Overlay on the other hand is mostly used in decorative banners or landing pages. They are always visible on the screen and generally, are not animated.

In this tutorial, for Popup Overlays we’ll be using jQuery as we need javascript for handling User Clicks and Generating Pop Ups

However, for displaying Always Display Overlays we make use of CSS Grid which is a relatively newer feature in the latest version of css – CSS v3  

Prerequisites

For the most part, you do not need to know CSS Grid or Advanced jQuery as we’ll be learning a large portion of the concepts before we apply them in code.

However, these are the formal prerequisites of this course

1. Basic knowledge of HTML, CSS
2. Little bit of experience with Javascript/jQuery will certainly be helpful

The Final Overlays using CSS Grid and jQuery

To keep you excited about learning overlays, here are a few designs that we will be building in this tutorial

Always Display Overlays Using CSS Grid

If you had any confusion about what Always Display Overlays are, hopefully they should be clear by now.

They are essentially multi layered content where it’s possible to put one thing ( such as an image ) on top of another ( for eg, text ) to give the website a 3-dimensional look making the experience feel richer

Popup Overlays using jQuery

Unlike Always Display Overlays, the popup overlay only appears on specific conditions ( say, a button click ) and overlays the entire screen.

What is CSS Grid & How Does it Work?

CSS Grid is a Layout System that allows you to have total control over how elements are displayed on a screen. Unlike the previous positioning techniques in css such as position: absolute or position: relative CSS Grid makes the design process intuitive by dividing the entire screen into a 2 dimensional grid

Understanding the CSS Grid Terminology

Now that we know that CSS Grid divides the screen into a 2d Grid, let’s try to understand the division process and how to place the elements in that particular 2d grid

1. The coordinate system of a CSS Grid starts at top left and expands towards the bottom right
2. In CSS Grid the coordinates start from (1,1) instead of the standard (0,0) that most people might be used to
3. Each coordinate, when extended to right or bottom forms the CSS Grid Lines
4. The area between those grid lines are called individual Cells. This is where we place the element
5. These Cells can also merge with the nearby cells to create space for bigger elements ( let’s say a rectangle )
6. The Cells can also have spacing between them to create better designs, these spaces are called Cell Gaps 

Using the Chrome DevTools Grid Debugger

To give you a better idea, let’s use the Chrome DevTools Grid Debugger to see the grid layout for the demo banner shown above

For using the Grid Debugger in Chrome DevTools

1. Press Ctrl + Shift + I to open devtools
2. Go to the Elements tab and click on the little grid button that appears near the grid

You will then see a more clear representation of the structure of the CSS Grid

Look at the above diagram and try to identify the Cells, Grid Lines and other dimensions of this particular grid

Hoping that you gave it an honest try, here are the important things to observe from the above grid

1. The above image is divided into a 6×6 rectangular grid
2. The grid lines are represented in pink and have corresponding numbers attached to them
3. The astronaut image occupies columns 5-6 and rows 3-6
4. The text overlaps the astronaut image giving it a 3d look

Writing some CSS Grid Code

Now that you have understood that astronaut image is specifically placed in rows 3-6 and columns 5-6 and is above the text. Let’s try to figure out how we would accomplish that in CSS

Firstly, we make the outer container a CSS Grid by adding the display: grid; property to it.

.container {
display : grid;
}

Then, we select the astronaut image using the .astronaut selector and position it properly in the grid using the grid-column and grid-row properties

In the grid-column and grid-row properties we specify the start line and the end line separated by a forward slash ( / )

For eg, to position the astronaut image in the rows 3-6 and column 5-6, we use the following code.

.astronaut {
grid-column: 5/6;
grid-row: 3/6;
}

Understanding Z-Index in CSS

After learning how to position elements in a CSS Grid, the only thing remaining is to understand why some elements appear above the other elements and how we can control this behavior

The simplest way to understand z-index is to think of the computer screen as a 2 dimensional paper with x & y axes. Now, since we are working with 3 dimensions, the third dimension is called the z-axis and z-index is simply the coordinate of the element in z-axis

The higher the value of z-index the more “Front” or “top” it appears to be. For eg, a z-index of 9999 or any arbitrarily high value will ensure that this particular element will overlap any other element.

If two elements have the same z-index value then their overlapping behavior would be the same as if they never had any z-index property.

In the above situation, to make the astronaut image overlap the text, we can simply set it’s z-index to 1 which will be larger than the z-index of text element, thus overlapping it( all elements have a z-index of 0 by default. )

Using CSS Grid to Make an Overlay Banner

After understanding how CSS Grid works, it’s time to implement it on the final project to create an overlay banner

Installing the Required Tools

IDE ( Optional )

Since we’ll be writing code to build a HTML Website we need a Code Editor or an IDE ( Integrated Development Environment ).

If you don’t know what an IDE is, it’s a program which provides features such as Syntax Highlighting, Error Detection, and much more.

There are many popular IDE’s on the market ( Sublime text, Atom, Notepad++, etc )

But for our purposes we’ll be using Visual Studio Code, which has the most features, and is a good choice for both beginners and advanced users

Browser

Any modern browser that can run standard HTML Websites such as Google Chrome or Firefox

Setting up the Project Folder & Files

Now that we have all the essential tools installed, it’s time to set up the files and folders for the project. Let’s get started by creating a project folder and naming it Overlay with Grid

• Then, just like a standard HTML website, we create the index.html and styles.css files. Since this project also involves working with images, we also create an images/ folder and place all the images inside it.

Note: To Download the Images used in this particular example, you can follow the link : https://imgur.com/a/depspzb

• After Downloading the images from the imgur link above, copy them to the images folder and rename them to match the above file structure so that you can follow along with the tutorial.

Let’s now get started with writing some standard HTML Code in the index.html file

<!DOCTYPE html>
<html lang="en">
 <head>
   <link rel="stylesheet" href="styles.css" />
   <title>Overlay Using CSS Grid</title>
 </head>
 <body>


   </body>
</html>

• In the code above, we get started by writing boilerplate stuff such as <!DOCTYPE html> to indicate that this is an html document.
• Then, we create the <html> tag inside which, we place the standard <head> and <body> tags. If you’ve never worked with HTML before, <head> basically contains all of the metadata or ( content that is not displayed on the screen ). Whereas for content that we want to show on the screen, we use the <body> tag.
• Inside the <head> tag, we first link the styles.css file using the <link> tag, after which we set the page title to Overlay Using CSS Grid
• The body will remain empty for now.

After making the basic structure of the HTML WebPage, it’s time to finally insert the banner onto the screen using the following HTML code

  <div class="banner1">
     <img src="./images/blue_bg.jpg" class="blue-bg" />
     <img src="./images/astronaut.png" class="astronaut" />
     <div class="left-content-1">
       <h1 class="banner1-text">Learn to Code Within 30 days*</h1>
       <button>Get Started</button>
     </div>
   </div>

Let’s have a step by step walkthrough of the code above,

• Firstly, we create a <div> and give it a class of banner1 so that we can identify it in the css file later on
• Since we are using CSS Grid, we don’t have to worry a lot about the inside elements such as the background image or text. They can simply be dumped wherever in the Container and can be arranged and sized later on in the CSS File.
• For example, the blue background image and the astronaut image appear to be side-by-side in the HTML Code but in reality, the blue background image is content to be the full-sized parent of the astronaut image simply by using CSS Grid
• After images, we also write the banner tagline as “Learn To Code Within 30 Days*” and add a simply Get Started button below it

Using CSS Grid to Make the Overlay

After being done with the HTML Code, it’s time to write the CSS that will actually make the Grid and Overlays

Let’s start by the simplest step, setting the banner to display: grid; and giving it a fixed height of 600px

.banner1 {
 display: grid;
 height: 600px;
}

Then, we use the following code to make sure that the blue background image occupies the entire banner

.blue-bg {
 height: 600px;
 width: 100%;
 object-fit: cover;
 grid-column: 1/6;
 grid-row: 1/6;
}

• Firstly, to make the image fit the banner, we have to specify the height as 600px ( the same height as the parent banner ) and width of 100%
• Then, to make sure that this image properly fits the screen, we use the object-fit: cover; property.
• Coming to the grid layout, as discussed, we will be dividing the banner to a 6 by 6  grid. Since the blue background image covers the entire grid, we set the column and row properties to span from 1 to 6 covering the entire banner
• Notice how we didn’t specify anywhere that the grid will be 6 by 6. This is because, CSS Grid can automatically detect the grid dimensions based on the column and row numbers requested by its children.

.astronaut {
 height: 400px;
 grid-row: 3/6;
 grid-column: 5/6;
 z-index: 1;
}

• In the code above, we firstly size the astronaut image to 400px to make sure that it is lesser than the height of the banner
• Then, exactly like we discussed in the previous section, we span the astronaut image to rows 3-6 and columns 5-6
• Lastly, to make sure that the astronaut image overlaps the text, we give it a z-index of 1

.banner1-text {
 color: white;
 font-size: 75px;
}

button {
 color: blue;
 background-color: white;
 height: 60px;
 width: 300px;
 font-size: 20px;
 border-radius: 10px;
}

• This code is mainly used for styling the banner text and the Get Started Button
• For the banner text, we simply set the font color to white and increase the font size to 75px
• Coming to the button, we first set it’s dimensions to 300px wide and 60px height
• Then, we change the background color to white and set the font color to blue
• To give it a more polished look, we set the border radius to 10px

.left-content-1 {
 grid-row: 2/5;
 grid-column: 2/6;
}

• After designing the Left Content ( Banner Text & Get Started Button ) we position it in the grid using the grid-row and grid-column properties
• As discussed, we will be placing the left content element between rows 2-5 and columns 2-6

And that’s it! Save the .html file and .css files, and reload the page and you should see the same result as the final product shown above.

CSS Grid Overlay Banner Exercise ( Optional )

For people who would like to practice this overlay technique, here’s an optional exercise

Problem

Implement the above overlay design using CSS Grid

Note: The images required for this exercise are in the imgur link mentioned in previous sections

Solution

It is important that you only look at the solution after giving the problem an honest try. But if you still can’t solve it, then it’s totally fine and you can try to learn from the solution below

HTML Code

    <div class="banner2">
     <img src="./images/forest_bg.jpg" class="forest-bg" />
     <img src="./images/tree.png" class="tree" />
     <div class="banner2-text">Take Active Steps to Save Your Environment</div>
   </div>

CSS Code

.banner2 {
 height: 600px;
 display: grid;
}
.forest-bg {
 object-fit: cover;
 height: 600px;
 width: 100%;
 grid-row: 1/6;
 grid-column: 1/6;
}
.tree {
 grid-row: 4/6;
 grid-column: 5/6;
 z-index: 1;
}

.banner2-text {
 grid-column: 2/6;
 grid-row: 4/5;
 color: white;
 font-size: 60px;
 font-weight: bold;
}

Animated/Dynamic Overlays using jQuery

Now that we are done with Fixed Banner Overlays. Let’s get started on Dynamic Popup Overlays by creating the project files & folders first.

Setting up The PopUp Overlay jQuery Project

• To keep things simple, instead of creating a new folder and setting up files all over again, let’s just create an overlay.html file in the same folder.

Inside the newly created overlay.html file, we start with the following code

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Overlay using jQuery</title>
 </head>
 <body>

 </body>

 <style>

 </style>

 <script>
 </script>

</html>

• Just like the previous sections, we get started by standard HTML Boilerplate code and declare stuff such as <!DOCTYPE html> and following with standard elements such as <head> and <body>
• Inside <head> we also make use of the <title> tag to set the page title as Overlay using jQuery
• Unlike the previous sections where we linked the CSS using <link> tag, we simply insert the css code inside the <style> tag. This is because, the simplicity of this project doesn’t allow to create an entirely new file for only a couple of lines of CSS Code
• Similarly, to write the jQuery code, instead of creating a dedicated javascript file, we will simply work on it inside the <script> tag

Installing jQuery for the Popup Overlay Project

Before moving ahead and writing code, it’s important that we have jQuery installed.

To do that,

• Go to CDNJS and search for jQuery. If you’ve never heard of them, CDNJS is a popular CDN ( Content Delivery Network ) that serves javascript files for popular frameworks such as jQuery, Bootstrap and a lot more!

• Select on the Copy Script Tag button for the latest jQuery Version
• Paste the copied <script> tag inside the overlay.html file

And done! The current project now has jQuery Installed and we can directly start using it inside the <script> </script> block that we created previously.

Creating the HTML Structure for the jQuery Popup Overlay Project

  <button>Show Overlay!</button>
   <div class="overlay">
     <h1>This is a Sample Overlay Text</h1>
     <h3>Click Anywhere to close this overlay</h3>
   </div>

• In the above code, we get started by creating a simple button that says Show Overlay!
• After that, we create a <div> with a class of “overlay”. It should be pretty self explanatory that any content inside this <div> will act as an overlay.

Adding Styling to the jQuery Overlay Popup

    .overlay {
     height: 100vh;
     width: 100vw;
     position: fixed;
     opacity: 0;
     top: 0;
     left: 0;
     z-index: 1;
     color: black;
     background-color: rgba(128, 128, 128, 0.5);
     transition: all 0.3s;
   }

• Let’s get the obvious out of the way, since we know that the overlay will cover the entire screen. We set its height to 100vh and width of 100vw. Here vh and vw are special css units that represent the viewport height & viewport width where viewport generally means the size of the browser window.
• Then, to make sure that the overlay remains fixed to the screen and not scrolls/moves, we use the position: fixed; property and set the top & left properties to 0 ( top & left signify the distance between the overlay and top and left of the viewport/screen )
• For the actual overlay to work, we need to add a z-index value of 1. This makes sure that this overlay is on top of all the elements ( all of them have a z-index value of 0 by default )
• We then use the color and background color properties to set the colors for the overlay.
• The important property that affects the visibility of the popup is the opacity property. For those who don’t know, opacity is basically an opaqueness scale from 0 to 1 ( where 0 means completely transparent and 1 means fully opaque )
• This opacity property will be modified by using jQuery from 0 to 1 and vice versa, depending on the situation.
• For this opacity transition to occur smoothly, we also add a 0.3 second animation by using the transition: all 0.3s; property

Writing the jQuery code for Overlay Popup

  <script>
   const toggleOverlay = () => {
     let currentlySet = $(".overlay").css("opacity");
     let newOpacity = currentlySet == 0 ? 1 : 0;
     $(".overlay").css("opacity", newOpacity);
   };
   $("button, .overlay").on("click", () => toggleOverlay());
 </script>

• Firstly, we make a function called toggleOverlay that toggles the visibility of the overlay.
• Inside this function, we use the .css function provided by jQuery to modify the opacity property from 0 to 1 or 1 to 0 depending on the current visibility of the popup

The only thing left now is to make sure that this toggleOverlay function is called on either of these situations:

1. A Button Click
2. A click anywhere on the overlay

• To register a click event for both of these situations, we combine the elements using a “comma” in the following way: button, .overlay
• Then, we use the .on(“click”) function provided by jQuery that calls the toggleOverlay function on either of the two events discussed above.

And that’s it! The overlay popup should function as shown in the preview.

Conclusion

Congratulations on coming this far and completing this tutorial on Overlays using CSS Grid and jQuery. We covered a wide range of topics ranging from learning about CSS Grids to jQuery and even working on a small exercise. Hopefully this gave web designers a lot more inspiration to work on new ideas and designs. For people that found this interesting, there is still a lot more stuff to learn involving overlays – for example, Adding Animations / Videos to overlays and tons of other stuff to keep you occupied for a long time. If you found this useful and learnt something new today, do share this with your friends!

It doesn’t just end there, Apple’s design language has also inspired tons of other websites/apps to use their components. For eg, Apple Style Switches or Action Bar or even the Contact Manager App.

And that’s exactly what we’ll be learning in this tutorial, we’ll be building an iOS Style Switch and a iOS Style Contact List using only HTML and CSS. Yep, you heard that right, you DO NOT NEED Javascript to work on this tutorial. Sounds exciting? Let’s dive in. 

Also Read, can GPT help coders to create iOS/Objective C cade, and if you can detect the code? 

The Final Product – iOS Switches & Contact List

Before we go ahead and start building any application, it’s a good idea to have a Brief Image of what the final project will look like.

Here’s a glimpse of the final iOS Theming project that we’ll be working on. It has an iOS Styled Switch with an iOS Styled Contact List

Part#1 – Installing the Required Tools for iOS Theming Project

1. An IDE ( Integrated Development Environment ):

 If you don’t know what an IDE is, most of the IDEs on the market today can be considered as Advanced Code Editors. They speed up development by providing the user with advanced features such as Syntax Highlighting, Code Autocompletion, Error Detection, and a lot more. For this tutorial, we will be using Visual Studio Code which is quite popular & beginner friendly

2. Web Browser

Any modern web browser, such as Google Chrome or Firefox to test the React.js application

3. VS Code Live Server ( Extension )

If you’ve worked with websites before, you must’ve been in a situation where you have to Reload the page every single time you make changes to the HTML or CSS files. This can get quite frustrating when you have thousands of changes you need to make and preview.

To avoid this, we’ll be installing the Live Server extension on Visual Studio Code. This extension will automatically Refresh the page whenever it detects a change in either the HTML, CSS or any other project related files

Part#2 – Setting up the Project Files for iOS Theming

Now that we have installed all the essential tools, let’s create the Project Files for the iOS Theming project.

Since this is a basic project that requires only HTML and CSS, let’s create two files index.html and styles.css inside our project folder

Let’s get started by writing some boilerplate code inside the index.html file

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <title>iOS Theming</title>

    <link rel=”stylesheet” href=”./styles.css”></link>

  </head>

  <body>

  <h1> iOS Theming </h1>

  </body>

</html>

If you’ve already worked with standard HTML Websites before, then the above code must be easy to understand. But if you haven’t, then let’s have a walkthrough of the html code above.

• In the code above, we first start by writing <!DOCTYPE html>. This indicates that the file is a HTML file
• Inside the html tag, we set the Page Title to iOS Theming using the <title> tag.
• Then, we link the styles.css file using <link> tag provided by html
• Coming to the <body> tag, anything inside this tag will be visible to the user. So, let’s start by adding a <h1> Tag with iOS Theming as the main title for the website

The styles.css file can stay empty for now as we do not need to style the page just yet.

Part#3 Creating an iOS Style Switch

Working on the HTML for iOS Style Switches

Now that we are done with setting up the project files, it’s time to get started on writing code for creating an iOS Style Switch

• Let’s start by adding an H2 Heading to the page with Switches as the Title

<h2>Switches</h2>

Before we move to the next step and create the switch, it’s important that we understand how standard HTML Checkboxes work

In this tutorial we rely heavily on in-built functionality such as Input Checkboxes and HTML5 Labels. This is to avoid writing any JavaScript code and put the built in elements to use.

The only thing you need to know about Inputs and Labels for now is that

• Every checkbox input has a name property, this is so that other parts of the code can access the current status of the checkbox ( checked status )
• On clicking a Checkbox it’s status is toggled ( on to off or off to on )
• A Label is supporting text for a checkbox, the main thing to note here is, A Label Click is also considered as a checkbox click no matter where the label is located. So, the Checkbox Status is toggled even if the label is clicked
• Every label knows the checkbox / input it belongs to using the for property

Using all of the information above, try to come up with a solution to implement a Custom iOS Style Switch using only labels and inputs

Hopefully, you’ve taken your time and have come up with a reasonable solution / idea. If you didn’t, i’d still recommend you give it a try before reading the solution below

 <label for=”ios-switch”>

      Text for the iOS Switch

            <input type=”checkbox” id=”ios-switch” name=”ios-switch” />

<div class=”checkbox”>

        <div class=”toggle”></div>

      </div>

    </label>

• In the code above, we start by creating a Checkbox Input using <input type=”checkbox”>
• Then, we give the input a name attribute of ios-switch and use the same ios-switch value inside the <label for=””> property
• An important thing to notice here would be that Label wraps the code entirely. This ensures that the switch is toggled even if the user clicks anywhere near the switch ( for eg, clicking on Label Text )
• Then, we create two <div> elements that display the iOS Style Switch. The outer checkbox div represents the gray / green area of the switch whereas the inner toggle div is for the circular white toggle of an iOS Style Switch

If you look at the code above closely, you might observe that we not only have an input checkbox but also a <div class= “checkbox”>.

Here, the <input> checkbox is only used to keep track of the checked state ( this is done because we don’t have any other way to store the input checked/unchecked value since we are not using any javascript ). This <input> is hidden by using the display: none; css property.

The :checked or :unchecked status of this <input> checkbox is used to display the correct status of <div class= “checkbox”>

Working on the CSS for iOS Style Switch

As discussed, let’s start by making the <input> checkbox invisible by using display: none; property

label input {
 display: none;
}

Then, let’s design the checkbox and toggle <div> to match the style of an iOS Switch

.checkbox {
 background-color: grey;
 width: 40px;
 height: 20px;
 border-radius: 10px;
 align-items: center;
 transition: all 0.3s;
 margin-left: 12px;
}
.toggle {
 background-color: white;
 width: 18px;
 height: 18px;
 border-radius: 10px;
 position: relative;
 top: 1px;
 left: 1px;
 transition: all 0.3s;
}

• In the above CSS Code, we design the .checkbox div and .toggle div in their unchecked state
• In unchecked state the iOS Style Switch has a gray background and the small white circular toggle is on the left
• The toggle is positioned inside the checkbox by using position: relative; which means that properties such as left, top, right, bottom move the toggle relative to its initial position
• You can add rest of the properties such as height, width, margin etc according to your preference ( in the above code, the dimensions of the checkbox are 40×20 and that of the toggle are 20×20 )
• Then, to make the transitions smooth we add transition: all 0.3s; property to both toggle and checkbox. This makes sure that all properties ( left , right , height, width , etc ) have a smooth transition that lasts exactly 0.3 seconds

input:checked + .checkbox {
 background-color: #5bda4e;
}

input:checked + .checkbox .toggle {
 left: 21px;
}

After designing the unchecked states, it’s time to finally design the checked states.

This is where the <input> checkbox comes handy. Using the css selector input:checked + <element> we can write custom css for that particular element that is only applied when input is checked

• In the above code, we add a light green background ( #5bda4e ) to the outer checkbox ( this represents the checked state )
• Then, we also need to move the toggle to the right of the checkbox. By simple calculations of dimensions you can conclude that the left property needs to be adjusted to 21px instead of the initial 1px

And that’s it! The switch should be perfectly functional now and you won’t need to worry about animating the switch, this is because we added the transition: all 0.3s; property before hand. This by-default ensures that transitions for all properties are animated in 0.3 seconds time

Part#4 Creating an iOS Style Contact List

Now that we are done with creating iOS Switches, it’s time to move ahead and work on the iOS Style Contact List

• Just like the previous section, let’s start by adding a H2 Heading with “Contact List” as the title

 <h2>Contact List</h2>

• Then, to simulate a Mobile Device let’s create an outer container called ios-contacts-container and give it the dimensions of an iOS Device ( for eg, 667×375 for the latest iPhone SE )

  <div class=”ios-contacts-container”>

    </div>

.ios-contacts-container {
 width: 375px;
 height: 667px;
 display: flex;
}

• Looking at the final contacts screen, the contacts app can be divided into two sections the contact list and the alphabet sidebar
• Then, let’s create two sections, ios-contacts and ios-contacts-sidebar. And make them appear horizontally by using flexbox

  <div class=”ios-contacts”>

     </div>

     <div class=”ios-contacts-sidebar”>

      </div>

.ios-contacts {
 flex: 10;
}
.ios-contacts-sidebar {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

• In the above code, we assign the main contacts container a flex value of 10 and the sidebar a default value of 1
• Since the Alphabet Sidebar contains a column of alphabets from A-Z.  It’s a good idea to mark it as a flexbox container with column direction and then finish it up by centering the alphabets using justify-content: center;

Looking at the main contacts section, let’s divide contacts for each letter into a separate section called ios-contact-section

This ios-contact-section will contain two other <div>’s: One for the Alphabet of the current section and the other for displaying the contact names  in this section

Here’s an example for an ios-contact-section container that we’ll be working with

  <div class=”ios-contact-section”>

          <div class=”ios-contact-letter” id=”a”>A</div>

          <div class=”ios-contact-letter-container”>

            <div class=”ios-contact-name”>Aaron</div>

            <hr>

            <div class=”ios-contact-name”>Ali</div>

            <hr>

            <div class=”ios-contact-name”>Amy</div>

          </div>

        </div>

Similarly, let’s create ios-contact-sections for the letters B and C

<div class=”ios-contact-section”>

          <div class=”ios-contact-letter” id=”b”>B</div>

          <div class=”ios-contact-letter-container”>

            <div class=”ios-contact-name”>Benjamin</div>

            <hr>

            <div class=”ios-contact-name”>Bertie</div>

            <hr>

            <div class=”ios-contact-name”>Bob</div>

          </div>

        </div>

             <div class=”ios-contact-section”>

          <div class=”ios-contact-letter” id=”c” >C</div>

          <div class=”ios-contact-letter-container”>

            <div class=”ios-contact-name”>Catherine</div>

            <hr>

            <div class=”ios-contact-name”>Charles</div>

            <hr>

            <div class=”ios-contact-name”>Cindy</div>

             <hr>

            <div class=”ios-contact-name”>Cindy</div>

             <hr>

            <div class=”ios-contact-name”>Creed</div>

             <hr>

            <div class=”ios-contact-name”>Christopher</div>

          </div>

        </div>

In the above ios-contact-section we assign each ios-contact-letter an ID of the current letter. ( For eg, the contact section for letter c has an ID value of C )

These ID Values will come in handy when we have to auto-scroll to a section as soon as the user clicks on the alphabet sidebar

Now, let’s add the Letters inside the alphabet sidebar. Each letter is a Link tag ( <a> ) with an href value of that particular letter. This href value should contain the ID Value that we discussed earlier about.

For eg, the Link Tag for letter B has an href attribute of #b which also happens to be the ID Value of ios-contact-section for letter B. This means, on a click event on the letter B the page is auto-scrolled to ios-contact-section for the letter B

<a href=”#a”>A</a>

<a href=”#b”>B</a>

<a href=”#c” >C</a>

<a href=’#d’ >D</a>

<a href=’#e’ >E</a>

<a href=’#f’ >F</a>

<a href=’#g’ >G</a>

<a href=’#h’ >H</a>

<a href=’#i’ >I</a>

<a href=’#j’ >J</a>

<a href=’#k’ >K</a>

<a href=’#l’ >L</a>

<a href=’#m’ >M</a>

<a href=’#n’ >N</a>

<a href=’#o’ >O</a>

<a href=’#p’ >P</a>

<a href=’#q’ >Q</a>

<a href=’#r’ >R</a>

<a href=’#s’ >S</a>

<a href=’#t’ >T</a>

<a href=’#u’ >U</a>

<a href=’#v’ >V</a>

<a href=’#w’ >W</a>

<a href=’#x’ >X</a>

<a href=’#y’ >Y</a>

<a href=’#z’ >Z</a>

The above code might look a little Too Repetitive and if you’ve heard anything about good programming practices, one of the main ones is using the DRY ( Don’t Repeat Yourself ) Principle.

However, in this situation, since we are limiting ourselves to use only HTML & CSS and are not taking advantage of the functionality that Javascript provides. It is perfectly fine if we do stuff such as writing HTML Code for ever letter repetitively and manually

And that’s it! After finishing, the final product should look similar to the one shown below

Bonus: Using jQuery To create iOS style switches

Working only with HTML and CSS can sometimes make it harder to do things that can be simply done using Javascript or jQuery.

Let’s have a look at how we can use Simple jQuery Code to create the same iOS Style Switch like the one before

We first get started by Installing jQuery

To do that,

• Go to CDNJS and search for jQuery. If you’ve never heard of them, CDNJS is a popular CDN ( Content Delivery Network ) that serves javascript files for popular frameworks such as jQuery, Bootstrap and a lot more!

• Select on the Copy Script Tag button for the latest jQuery Version
• Paste the copied <script> tag inside the overlay.html file

And done! The current project now has jQuery Installed

After installing jQuery, let’s write the HTML code of the iOS Switch

    <label for=”ios-switch”>

      Text for the iOS Switch

<div class=”checkbox”>

        <div class=”toggle”></div>

      </div>

    </label>

• One main difference you can notice between the current HTML Code and the one used previously is that – there is no <input checkbox> used here. This is because we can simply use a javascript variable to keep track of the on/off state
• Remaining part of the code stays exactly the same

.checkbox {
 background-color: grey;
 width: 40px;
 height: 20px;
 border-radius: 10px;
 align-items: center;
 transition: all 0.3s;
 margin-left: 12px;
}
.toggle {
 background-color: white;
 width: 18px;
 height: 18px;
 border-radius: 10px;
 position: relative;
 top: 1px;
 left: 1px;
 transition: all 0.3s;
}

• In the above code, we design the outer grey checkbox by giving it dimensions of 40 x 20 pixels and adding rounded corners to it.
• Similarly, we then design the toggle to be a 18 x 18 Pixel Circle that is initially in the off position ( left)
• Most of the styling stays exactly the same as we are only changing the way the toggle works – not how the toggle & checkbox look.

let checked = false;

function toggleSwitch() {
if(checked) {
$(".checkbox").css("background", "grey");
$(".toggle").css("left", "1px");
}
else {
$(".checkbox").css("background", "#5bda4e");
$(".toggle").css("left", "21px");
}
checkbox = !checkbox
}

$(".checkbox").on("click", toggleSwitch());

• In the above code, we store the on/off status of the switch in the checked variable

• Then, we create a function toggleSwitch that changes the state of the switch depending on the checked variable
• If checked is already true, we move the toggle to left and change the background to grey by using the jQuery css function.
• Whereas, if checked is false, we move the toggle to right and change the background color to iOS Green ( Hex code: #5bda4e )
• After that, we change the checked variable to its opposite ( true to false and false to true )
• Lastly, we simply need to attach this function to the checkbox by using the jQuery on click function

And that’s it! Hopefully you were able to see how within a few lines of jQuery code we were able to accomplish the exact same result.

Conclusion

Congratulations on coming this far and completing the tutorial on iOS Style Switches & Contact Lists. Hopefully this gave you a good idea about the design principles that Apple uses in its products. In this tutorial, we also learnt that a lot more stuff such as switch animations / transitions were possible using only HTML & CSS and without any Javascript. To really solidify the concepts that you learnt in this tutorial, you can try making a fully functional Clone of any iOS Application. This way, not only will you have a finished product at the end, but will also have learned a lot more than you could have by just reading. If you liked this tutorial and learnt something new today, do share it with your friends!

The average user is much less likely to return to your website again if it is slow to load or is not responsive enough to work on touch interfaces.

Things such as smaller buttons/text or in general desktop type interfaces on mobile websites can not only make the experience bad, but can also affect search engine rankings.

Yes, you heard that right – with popular search engines such as Google aiming to provide the best possible experience to its users, a non-mobile-friendly website is much less likely to be ranked higher on search results – despite the content.

But, do not worry – in this tutorial we’ll tackle this problem using a framework called jQuery Mobile. This framework was built from group-up keeping in mind the rise of mobile internet users. It aims to provide developers with a smooth & easy experience in making mobile-friendly web applications.

What is jQuery & jQuery Mobile?

jQuery is a lightweight javascript library used to build standard html/css/javascript websites. But, with much cleaner and shorter code. It accomplishes this by providing easy to use functions that help in animations, event handling , and manipulating the UI. Although, it is technically true that all of this can be done by using vanilla javascript – the difference arises in time taken and code readability

Along with its standard library that was released in 2006. jQuery also realized that web on mobile will grow big, and hence decided to make Mobile Web Development easier by launching jQuery Mobile.

jQuery Mobile was designed to be used alongside jQuery. It had additional features that made all of the elements Touch Optimized by default. It also came with prebuilt widgets including Buttons, Selectors, Input Sliders, Navbars and a lot more!

Most of these widgets that came with jQuery Mobile required very little tinkering to do as they were already optimized – both in design and functionality to run on touch screen devices such as Mobile Phones. This allowed developers to quickly release mobile versions of their websites without having to spend extra time or resources.

The Final Mobile Web App Using jQuery Mobile

There is no better way to learn something than to build a small functional application using it. By following the philosophy of “learn by doing” we can ensure that not only do we understand concepts in the moment – but we also retain them for longer periods of time.

In this tutorial, we’ll be working on a Gamer Survey website which aims to collect important data such as Age, Playing Hours, Recently Played Games all while using tons of jQuery Mobile Features. This way, we’ll cover almost all the important functionality that jQuery Mobile provides

At the end, we’ll also be adding a dark theme to the app to give it a more modern look.

To keep you excited, here’s a demo of the final application:

Part#1 – Installing the Required Tools for jQuery Mobile Development

Since jQuery is a lightweight JavaScript library and not a fully fledged framework like Angular or React there are very few – but important tools to be installed

IDE ( Optional )

Since we’ll be writing code to build a jQuery Mobile App we need a Code Editor or an IDE ( Integrated Development Environment ).

If you don’t know what an IDE is, it’s a program which provides features such as Syntax Highlighting, Error Detection, and much more.

There are many popular IDE’s on the market ( Sublime text, Atom, Notepad++, etc )

But for our purposes we’ll be using Visual Studio Code, which has the most features, and is a good choice for both beginners and advanced users

Browser

Any modern browser that can run standard HTML Websites such as Google Chrome or Firefox

Part#2 – Setting up the Gamer Survey Project using jQuery Mobile

To create a new jQuery Mobile project, we start by

• Creating a project folder gamer_survey and adding an index.html file to it

In this particular project, we won’t be needing to add any css or javascript files as jQuery Mobile already comes with pre-built widgets that have styling & animations included by default!

• Inside the index.html file, we get started by writing standard HTML starter code

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Gamer Survey</title>
 </head>
 <body></body>
</html>

• In the above code, we start off by writing <!DOCTYPE html> to declare that this is an html document
• Then, inside the <html> tag, we add <head> and <body> elements. If you haven’t worked with HTML before, <head> tag contains all of the Metadata or Website Information that is not displayed to the user. Whereas, every element inside the <body> tag is visible to the user
• In the <head> tag, we have a few <meta> tags that are here by default, but we don’t have to worry about them. The only important thing inside <head> is the <title> tag. It contains, as you guessed – the page title

Now that we are done with setting up the HTML file, it’s time to add jQuery Mobile. To do that we’ll be using a free service called CDNJS. If you’ve never heard of them, cdn.js provides links and <script> tags for almost all popular libraries & frameworks.

This way, you don’t have to spend time looking through the official website of frameworks anymore as CDNJS can work as a centralized space to find direct links to popular frameworks and libraries

• Visit the official website of cdn.js and search for jQuery Mobile

• Copy the <link> and <script> tags for the .js and .css files shown above

Since jQuery Mobile depends on jQuery, we have to install that as well. Luckily, the process is just like the one shown above and can be done using cdn.js

It is however important to note that the last version of jQuery Mobile – 1.4.5, DOES NOT support the latest jQuery version. This is because jQuery Mobile is currently an abandoned project and is not supported anymore.

However, we can still make things work in this tutorial by installing an older version of jQuery – 2.1.0. ( Released in 2014 )

Copy all of the <script> and <link> tags collected from cdnjs and simply insert them in top of the <head> tag like shown below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />

It is important that the jQuery <script> tag stays above the jQuery Mobile tag. This is because jQuery Mobile depends on jQuery to be present for it to work properly.

NOTE: It is always better to put the <script> tags at the end of the HTML code. This allows for websites to load faster as the main text content is loaded before heavy scripts are. However, this can be neglected for a small application like the one we’re working with.

Part#3 – Creating Pages for the jQuery Mobile Application

Now that we are done with the setup and have jQuery Mobile installed, it’s time to get started working on the web application. Before we get started, however, it’s important to understand the concept of Pages in jQuery Mobile

In jQuery Mobile world, Pages can be considered as Individual Screens. For example, a website may have an Home Page & an About Us page just like the Gamer Survey app that we’re working on.

The way that pages work is –

• There can be code for multiple pages in the same index.html file
• The way that pages are distinguished from each other is by having a unique ID ( For eg <div id=”page1”>
• Any <div> element can be declared as a page simply by passing the data-role= “page” attribute to that element.
• To switch between pages, we can simply use the default link tags <a href= “#id”> where id is the id of the page that you want to switch to

Let’s use the following code to create two pages for the application.

    <div data-role="page" id="survey">
     <div data-role="header"></div>
     <div class="ui-content"></div>
     <div data-role="footer"></div>
   </div>    <div data-role="page" id="about-us">
     <div data-role="header"></div>
     <div class="ui-content"></div>
     <div data-role="footer"></div>
   </div>

• In the above code, we created two pages by making two <div> elements and assigning them an attribute of data-role= “page”
• To identify them uniquely and to switch between them, we also need to assign IDs to these pages. In the above code, the pages are assigned ID values of #survey and #about-us
• Although it is not mandatory to do so, but almost every jQuery Mobile Page is divided into three sections: header, content and footer
• Therefore, we create three child <div> elements inside the parent <div> and assign them as header/footer by using the data-role attribute

NOTE: By default jQuery Mobile displays the page that comes first in the HTML file

Then, just like in the final application, we design the header section. To simply be a Navbar that simply displays the website title

<div data-role="navbar">
  <h1 class="ui-title">Gamer Survey</h1></div>

• Firstly, we specify that the header element will be a navbar using the data-role= “navbar” attribute
• Inside the navbar, we simply have an <h1> tag that displays the website title – Gamer Survey
• To give the title a good styling we use the pre-built jQuery Mobile Class of ui-title

Note: It is important to add this navbar in both the pages as page switches remove all the elements inside – including the navbar

Similarly, let’s design the footer to display two options to choose from – Home Page and the About Page

<div data-role="navbar">
     <ul>
       <li>
         <a href="#survey" data-icon="home" class="ui-btn-active">Home</a>
       </li>
       <li>
         <a href="#about-us" data-icon="info">About Us</a>
       </li>
     </ul>
</div>

• The above code should be pretty simple to understand as it is just a basic jQuery Mobile Navbar
• A Navbar can have multiple navigation options – or multiple pages that it can navigate
• To declare the navigation options for a navbar, we simply use an unordered list <ul> which has multiple list elements each of them containing links to that particular page
• It is important to note that these links must have correct id values that represent the corresponding page
• Finally, for this navbar to work properly, it has to be present on every page

Part#4 – Adding Basic Form Elements to the jQuery Mobile App

After having the basic structure of the pages ready, it’s time to work on the homepage and design all of the form elements such as Sliders, Input Boxes, Radio Buttons, Check Boxes and a lot more!

Let’s get started by writing a simple heading for the form using the <h1> tag as shown below

<h1>Please help us by answering the following survey!</h1>

If you look the final web app closely, you realize that each form element has two parts

1. a label
2. The input element itself

In HTML a form label is linked to the form element by using the for= “#id” property. Here, #id represents the id of the form element

Option Selector using jQuery Mobile

     <label for="age" class="select">What is your age?</label>
       <select name="age" id="age" data-native-menu="false">
         <option></option>
         <option value="under13"><13</option>
         <option value="13to18">13-18</option>
         <option value="18-25">18-25</option>
         <option value="above25">25+</option>
       </select>

• In the code above, we firstly use the <label> tag to attach a question to the form element
• Then, we use the standard <select> tag provided by HTML and give it a name and an id ( It is important that this #id matches the one inside the label for= “#id” )
• Inside the <select> menu we declare all the possible options for different ages by using the <option> tag provided by HTML
• Lastly, to give custom styling to this <select> menu, we pass it the data-native-menu= “false” attribute. This ensures that the default native stying of the <select> tag is not used.

Range Slider using jQuery Mobile

     <label for="hours">How many hours do you play daily ? </label>
       <input
         type="range"
         id="hours"
         value="1"
         min="0"
         max="24"
         step="1"
         data-highlight="true"
       />

• Similar to the option selector, we start by declaring a <label> tag relevant to the form element
• Then, we add an <input> tag providing it with the following attributes

1. Type: range is an html property used to declare that this particular <input> element is a range slider
2. Id: hours is a standard id property for this element. The same id also used in the label for= “” property to link both of these together
3. Min: 0 and Max: 24 represent the minimum and maximum values attainable by this slider. Since a day has a maximum of 24 hours. 0-24 would be an ideal choice for min & max attributes
4. Step: 1 ensures that there are no decimal / floating point values and all possible values have a difference of 1 ( for eg: 0,1,2,3,4….24 )
5. Value: 1 is the initial or default value of the slider. It can be anything between 0 and 24
6. Data-highlight: True is a decorative property that adds a light blue highlighting color to the range slider

Radio Buttons using jQuery Mobile

<fieldset data-role="controlgroup">
             
         <legend>
           Do you find that gaming interferes with your social / academic life?
         </legend>
         <input type="radio" name="yes" id="yes" value="yes" /><label for="yes"
           >Yes</label
         >

         <label for="no">No</label
         ><input type="radio" name="no" id="no" value="no" />
</fieldset>

• Usually, Radio Buttons are used when only one option can be selected out of a list of possible options
• In jQuery Mobile to use Radio Buttons and Checkboxes they are wrapped in a <fieldset> tag and are given a data-role value of “controlgroup”
• The title of this particular fieldset is set by using the <legend> tag. This is different from a <label> tag.
• <label> tags are used to set labels for individual form elements. In this case, the possible options are individual form elements therefore, they have to be named by using the <label> tag
• However, to name a group of <input> tags or a <fieldset> the <legend> tag is used
• In the above code, we make <label> and <input> for both the possible options Yes and No

Checkboxes using jQuery Mobile

    <fieldset data-role="controlgroup">
         <legend>Have you played any of these games recently?</legend>
         <input type="checkbox" name="bgmi" id="bgmi" /><label for="bgmi"
           >Call of Duty</label
         ><input type="checkbox" name="Among Us" id="amongus" /><label
           for="amongus"
           >Among Us</label
         ><input type="checkbox" name="Fall Guys" id="fallguys" /><label
           for="fallguys"
           >Fall Guys</label
         >
       </fieldset>

• Just like Radio Buttons, we declare a <fieldset> and give it a data-role of controlgroup
• Then, we declare <input> and <label> elements containing the possible options
• The only real difference between this code and the one in Radio Buttons is that we are using <input type= “checkbox”> in this code.
• Lastly, to name the entire options group, we use the <legend> tag which contains the appropriate question.

Yes/No Switch using jQuery Mobile

        <label for="tc"
         >I have understood & agree with the Terms & Conditions
       </label>
       <select name="tc" id="tc" data-role="slider" data-mini="true">
         <option value="off">No</option>
         <option value="on">Yes</option>
       </select>

• jQuery Mobile also supports a simple Yes/No toggle using the code above.
• Firstly, just like all the form elements before – we start by writing a <label> with the appropriate text
• Then, we create a <select> menu containing two <option> tags – each of them representing Yes and No
• Finally, to give it that toggle look we simply add a data-role= “slider” property to the <select> menu
• You can also optionally make the toggle small by using the data-mini= “true” attribute

Buttons & Popups using jQuery Mobile

         <a
           href="#submitPopup"
           data-rel="popup"
           class="ui-btn ui-corner-all ui-shadow"
           data-transition="pop"
           >Submit</a
         >


       <div data-role="popup" id="submitPopup">
         <p>The form was submitted successfully!</p>
       </div>

The above button acts as a Submit Form button. However, as this is a demo application this button only displays a “Form Submitted Successfully” popup after being clicked.

• Firstly, we create a <div> and give it a data-role of popup.
• After this, anything inside the <div> becomes invisible by default and will only become visible when someone calls this popup
• However, to call this popup we need to provide it with an id ( for eg: submitPopup)
• Then, we create a button using the link tag <a> and inside it’s href value we provide the #id value of the popup. This makes sure that the relevant popup is shown after the button is clicked
• To add additional styling to the button we add default jQuery Mobile classes such as ui-btn
• To make the button corners rounded and to add a shadow to the buttons, we use the ui-corner-all and ui-shadow classes respectively

Part#5 – Designing the “About Us” page on the jQuery Mobile Application

Lastly, we add content to the About Us page using the code below

       <h1>About Us</h1>
       <p>
         This is a demo application built using <b>jQuery Mobile</b>. This
         shows basic features of jQuery Mobile such as Buttons, Themes, Navbar,
         Sliders, Checkboxes and a lot more !
       </p>

• In the above code, we start by declaring a <h1> tag with the title of the page – About Us
• Lastly, we add a simple paragraph tag <p> to write the description of this page
• We also make use of the bold tag <b> to highlight a few sections of the text by making them bolder

Part#6 – Theming the jQuery Mobile Web App in Dark Mode

By now, your application should look something like this

It’s time to make stuff more interesting by theming the app. By default, jQuery Mobile also provides us with a Web Tool called themeroller ( https://themeroller.jquerymobile.com/ )

In jQuery Mobile themes work in the following way

• In a single web app, there can be upto 26 themes each having a letter from A-Z
• Every single page or any <div> can have it’s own theme by using the data-theme attribute which takes a letter from A-Z

Since we only require one dark theme – we’ll be selecting the letter A and creating a dark theme on that

Using the color palette shown above, simply drag and drop the colors into the letter A to create your desired theme A

The final result for a dark theme looks like the one above. You can leave the theme letters B and C empty for now as we will only be needing the single dark theme present in the letter A

From the menu above, simply click on the download theme zip file and copy the themes folder into your project directory as shown example below

Then, we simply need to add the below lines in the beginning of the <head> tag to link these themes into the index.html file

Then, simply add data-theme= “a” attribute to the <body> tag to enable site-wide darktheme!

Bonus: Adding Plugins to jQuery Mobile App – ( jCollapsible Comments )  

This is an optional section for people who are interested in learning more about adding custom plugins in jQuery Mobile

After completing the Game Survey Web App above, we’ll be making a simple demo that will make use of the jCollapsible Plugin.

This plugin essentially converts an HTML List to a properly formatted comment thread with only a few lines of code

• Firstly, download the jCollapsible.js file using the following link
• Move the downloaded javascript file to your project folder

Let’s create a sample comment section with HTML lists using the code below

  <ul id="comments">
     <li>
       This video was really good!
       <ul>
         <li>Yes I Agree!</li>
         <li>Me too!</li>
       </ul>
     </li>
     <li>Inspiring..</li>
     <li>Could have been better</li>
   </ul>

The above code should return an output similar to the one shown below.

To make the comment section collapsible, we simply add the jQuery Collapsible plugin and use the .collapsible() method like shown below

    <script src="./jCollapsible.js"></script>
   <script>
     $("#comments").collapsible();
   </script>

The above code should make the #comments section collapsible giving the following result

Conclusion

Congratulations on coming this far and completing this journey of learning jQuery Mobile. In this tutorial we discussed a wide range of topics such as Sliders, Radio Buttons, Checkboxes, Switches, Buttons, Popus and even Pages. We also learnt a little bit about theming and adding dark themes in jQuery Mobile.

However, do not consider jQuery Mobile to be limited to what we discussed today as there is a lot more to learn from their official documentation and this tutorial was only intended to give you enough information so that you can learn the rest on your own

Another important thing to note is that jQuery Mobile is no longer supported and it has been that way for a long time since 2014-2015. However, there are still tons of mobile websites that still make use of this library. While it is good to know about it, it is definitely not recommended to start a new jQuery Mobile project especially in 2022.

Similarly, UI/UX designers also have UI Kits or UI Packs that help them in designing the User Interfaces and Prototypes quickly. Most of these UI Kits have reusable components such as buttons, input elements, headings etc… so that they don’t have to recreate them over and over again for every single use case.

Do you need a UI Kit or UI Pack?

Some of you might be hesitant to spend money on a UI Kit and worry about disrupting your current workflow.

But the truth is, even though UI Kits might slow you down a little at the start – just like learning anything new does, overtime they save you so much time and money compared to the initial investment you have to put in.

The only situation where it’s not recommended to purchase a UI Kit is when you’re just getting started on learning UI/UX Design or Figma

But for most working professionals in UI/UX UI Kits cannot be recommended enough.

With that out of the way, here are Top 7 UI Kits for Figma

UntitledUI – ( 199$ with FREE Version )

Untitled UI is one of the leading UI Kit Design Systems for Figmawith over 1000+ 5 Star Reviews and over 2000+ Components to use.

It comes with the following features

1. 30 DAY Money Back Guarantee 

It’s always good to have a peace of mind that you can return the product anytime and get your money back if it doesn’t seem to fit well for you.

UntitledUI provides you with a 30day money back guarantee that should be enough for most people to get an idea of their service.

2. 100% Auto Layout Components

        All of the components provided in Untitled UI are made keeping in mind AutoLayout.

        If you’ve never heard of it, Autolayout is essentially a property for figma components that allow them to be resized and re-adjusted based on the device screen size

Shipfaster UI – ( 90$ )

Shipfaster UI is mainly known for being used by some of the most popular tech giants such as Zoho, Shopify, CoinmarketCap, Stripe  and a lot more..

Here are the main features that Shipfaster UI provides

1. Over 6000 Customizable Components

        Shipfaster UI probably has the highest number of customizable components on this list. The more the components, more are the options for design and easier it is to find the exact component that you were looking for

2. Detailed Video & Text Documentation

This is one of the main features that sets apart Shipfaster UI when compared to other UI Kits available in the market. They have videos & detailed text documentation that demonstrate the working and use-cases of almost every single component.

Cabana – ( 69$ )

Cabana aims to create a performant UI Kit that runs smoothly on every device and is suitable for all designers ranging from beginner to advanced.

Most of the Cabana Components also come with something called Component Props ( similar to React.js props, if you’ve worked in React before ). These help in customizing the elements easily & quickly

Here are the main features that separate cabana from other UI Kits

1. 60 Day Free Trial Without Credit Card

        With most the UI Kits either charging you hefty one-time prices or not giving a free trial. Cabana aims to do things differently by providing a 60 day free trial without requiring a credit/debit card.

2. Starter Templates

        Cabana realized that it’s quite hard to do creative work when staring at a blank screen. That’s why, it provides designers with simple starter systems or templates that help them quickly get started on their work and finish the designs within a few minutes

UI Prep – ( 79$ )

Unlike other UI Kits that tend to overload people with thousands of Components / Icons. This particular UI Kit aims to do the opposite following the philosophy of “Less is More”

Here are a few features of UI Prep

1. Simplistic & Clean Interface

        UI Prep focuses on providing the designers with only the important and well-designed components. It is probably one of the most lightweight and bloat-free UI Kits out there. So if you’re someone who likes minimalism and keeps things simple, this particular UI Kit might be a good fit for you.

2. Supports Light & Dark Themes

All of the components are designed keeping in mind the Light and Dark Themes and themes can be easily switched only with a couple of clicks here and there.

ANT Design System – ( 99$ )

This UI Kit is inspired by the Ant Design system used in ReactJS. It aims to provide users with a similar experience on Figma. This UI Kit is also available on Adobe XD

Here are a few features of this UI Kit

1. Easier for Developers to Implement

        Since this UI Kit was built based on Ant Design, most of the UI Component Code is similar to the actual code that developers would write on the frontend. This speeds up the development process incredibly.

2. Exhaustive Documentation

        Ant design is one of the few UI Kits that come with a large & exhaustive developer documentation. This makes it easier for developers and beginners who are just starting out.

Lofi Wireframe Kit – ( FREE )

Unlike most other prototype philosophies that take time and have many unnecessary details, Wireframing is a process where the main focus is on building a blueprint of what the app will actually look like. Here’s an example of what wireframing looks like

As you can see, Wireframing is more like a brief sketch of the application than a fully working UI prototype.

Here are a few features of Lofi Wireframe Kit

1. One of the Best Wireframing Kits Available

        With most of the other UI kits geared towards building more complete UI Designs. There are not a lot of good UI Kits that exclusively support wireframing. Despite that Lofi Wireframing Kit made its way around to be the most popular wireframing kit currently

2. FREE for Everyone!

        This is probably the only UI Kit on this list that is completely Free for Everyone. However, if you like the product and want to support the developer – you can always use the donate option on their website

Frames X UI Kit – ( 99$ )

Frames X is a UI Kit + Ebook that contains thousands of components and instructions & documentation to make use of these components. It is mainly based on the Bootstrap Framework. This makes it easier for people familiar with bootstrap to get started with this UI Kit

Here is a list of the features that Frames X offers

1. More than 5500+ Components

        The number of components is certainly on par with most of the other popular frameworks. All of these components are completely customizable and support responsive layouts with the help of Auto Layout 4.0

2. Built in Chart Library

        This feature is really helpful if you are looking to design a Customizable Chart for things such as Dashboards and Portfolios. The Frames X UI Kit comes with more than 200+ blocks for Charts

Tips for Designing for Global Audience

Creating Internationalized Designs for every single language can quickly turn into a daunting task where you create a new design for every type of audience / demographic.

This can get even more complicated when languages such as Urdu ( read from right to left instead of the standard left-to-right ) come into the picture.

To avoid that, most people use a Figma Plugin that supports Localization. These plugins allow you to easily create dynamic components with features        that make it easier for them to work with multiple languages

As of now, the most popular Figma Localization Plugin is Lokalise 

Here is a quick list of the features that Lokalise supports

1. Allows Developers, Translator and Designers to work in the same place
2. Adjusting Images & Videos depending on the region.
3. Easily transfer translated texts from Lokalise to Figma and vice versa
4. Quickly switch between multiple languages in figma to adjust the designs

However, if you’re not interested in trying out paid options such as Lokalize, you can always open up figma plugin search and choose from a ton of free options like shown below

Conclusion

Choosing the right UI Kit can be a daunting task, especially for people just getting started and are on a strict budget. Hopefully, this article helped you in realizing the utilities & time savings that a Good UI Kit can provide you with. However, if you’re still hesitant to spend money – it’s a good idea to explore options such as Untitled UI, Cabana or Lo Fi Wireframe Kit that are either completely free or come with a free trial.

If you liked this article and it helped you in finding your dream UI Kit, do share it with your friends!

If we can enhance the way that buttons work, by let’s say adding animations or 3d effects on button hovering and clicking. This would make the website feel a lot more interactive and adds a little bit of fun element to the user experience.

In this tutorial, we’ll be having a look at creating 7 Animated Button Styles using only css.

This may be helpful for web designers looking for a new perspective on button styles, and most importantly for new web developers looking to make their websites creative & good.

The 7 Button Styles using CSS Animations

Before moving ahead and working on making the Animated Buttons, let’s have a look at the final product that we will be building.

1. Rainbow Animated Button

This button has a Rainbow Gradient on the Border that covers the entire button as soon as the user hovers over it.

2. Rotating Border Animation

In the inactive state, this button is a simple button with black text and black borders. But after a user hovers on the button, the border turns red starting from top left making a full rotation.

3. Flipping 3D Button Animation

These types of buttons are useful when there is additional information related to a user action ( for eg, Terms & Conditions )

On a mouse hover, the button flips vertically to reveal the additional content behind the button.

4. Color Filling Button Animation

This animation is probably one of the most widely used button animations, mainly because it looks good and is easier to implement than any of the other button animations shown above.

In these buttons, on user hover – the buttons start filling up with the selected color. The fill direction and starting point can be chosen according to user preference.

Prerequisites

Since there is no javascript involved and we will be learning stuff such as CSS Animations, Keyframes and Transitions from scratch, the prerequisites are quite minimal.

1. Basic HTML Knowledge ( knowledge about classes, ids, element tags etc )
2. Recommended to have an understanding of Basic CSS ( importantly, stuff such as positions, z-index, flexbox )

However, do not worry as you can still go through most of the tutorial without having an in-depth knowledge of the concepts mentioned above.

Installing the Required Tools

IDE ( Optional )

Since we’ll be writing code to build a HTML Website we need a Code Editor or an IDE ( Integrated Development Environment ).

If you don’t know what an IDE is, it’s a program which provides features such as Syntax Highlighting, Error Detection, and much more.

There are many popular IDE’s on the market ( Sublime text, Atom, Notepad++, etc )

But for our purposes we’ll be using Visual Studio Code, which has the most features, and is a good choice for both beginners and advanced users

Browser

Any modern browser that can run standard HTML Websites such as Google Chrome or Firefox

Understanding CSS Keyframes, Transitions and Animations

We can obviously dive right ahead into the code and get started on without understanding any of these concepts, but when you truly understand what’s behind the code that’s being written – it actually feels a lot more fun & interesting and it’s much more likely that you will retain them for a longer period of time.

CSS Transitions

Let’s say you want to make a Color Changing Square that changes its color from pink to blue whenever the user hovers over it

Using the knowledge that you already have, you might come up with a solution similar to this..

.square {
 width: 50px;
 height: 50px;
 background: pink;
}

.square:hover {
 background:blue;
}

• In the above code, we assume an empty <div> container has a class of square
• Firstly, let’s declare the dimensions of the square as 50px by 50px using the height and width properties
• Then, we use the background property to set the default background color of the square as pink
• We then make use of the :hover selector to change the background color of the square to blue whenever the mouse hovers over the square

Sounds simple right? On running the above code, you should get a result like this:

The above result might seem quite odd to you, especially the people who were expecting a smooth transition between the colors pink and blue

But there is a way to make this smooth transition to work, by using the – you guessed it – transition property!

The transition property takes 4 optional arguments

{
transition: property-name duration type delay;
}

Let’s try to apply a simple transition to the square element above.

{
transition: background 0.25s ease 0s;
}

The above transition property essentially states that:

“A Smooth Transition should occur whenever there is a change in the background property, this transition should last 0.25seconds and have a delay of 0 seconds”

Each of these transitions have an optional type parameter. This essentially provides instructions on how those 0.25 seconds are spent. The important possible values are

1. Ease ( default ) – the animations start slow & end slow but are fast in between
2. Linear – the transition does not change speed and goes in a constant linear fashion.

However, for most short transitions ( below 0.5 seconds ) this does not matter as it’s hardly noticeable by an average user on a mid-range monitor.  

Applying the above transition on the square, the results are

The above transition looks much more smooth and polished compared to what we did previously.

If you’d like to learn more in-depth information about CSS Transitions you can follow the MDN ( Mozilla Developer Network )’s Free Documentation at the following link

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

CSS Keyframes

For simple one-step animations such as changing the color or filling up the button, making use of CSS Transitions should be enough.

But coming to complex animations such as the Rotating Border Animation or any multi step animation in general, the easiest way to accomplish those is to use Keyframes.

Rather than explaining what a keyframe is, here’s the keyframe code required for the following multistep animation

Multi Step Animation

Keyframes Code

@keyframes anim {
 0% {
   width: 50px;
   height: 50px;
   background:pink;
 }
 33% {
   width: 100px;
   height: 50px;
   background: pink;
 }
 66% {
   height: 100px;
   width: 100px;
   background:pink;
 }
 100% {
   height: 100px;
   width: 100px;
   background: blue;
 }
}

The above multi-step animation, has 4 steps

1. The Initial 50×50 Pink Square
2. The width of this square is increased to 100px
3. The height of this square is increased to 100px
4. The background color is changed from pink to blue

If you observe closely, the keyframes code represent exactly the same 4 steps.

Basically, a keyframes is a collection of individual frames and the time at which that frame is displayed

So the above code can be understood as,

• At 0% of the time, ( initial position ) – show a square of pink background having a width and height of 50px
• At 33% or 1/3rd of the time – show a rectangle of pink background having a  width of 100px but a height of 100px
• At 66% or 2/3rd of the time – show a square of pink background and a width and height of 100px
• At the end of the animation or 100% – show a square of blue background and a width & height of 100px

As you can see, we are simply specifying what the object should look like at any point of time. The rendering engine is smart enough to automatically calculate what’s changed between the current frame and the previous frame ( for eg, in the second frame only width in increased to 100px whereas the height remains same. )

This allows for optimal rendering and smooth animations.

CSS Animations

The above keyframe has no use on its own, they ( keyframes ) are generally passed to the animation property for the animation to happen.

A standard animation property takes the following parameters

{
animation: <keyframes name> | animation duration | type | direction | delay ....
}

The animation property can take a lot of optional parameters, but for this tutorial, we’ll only need the following

1. Keyframes name – Exactly what it sounds like, the name of the keyframes being used.
2. Animation Duration – the duration of the animation
3. Direction – whether the keyframes should run forwards or backwards
4. Type – Similar to the types we discussed in transitions ( ease, linear, etc  )
5. Delay – The amount of time to wait before starting the animation

To make use of the above @keyframes anim, we use the following code

{
animation: anim 0.5s ease forwards 0s
}

Working on the Rainbow CSS Animated Button

Now that we have understood the basic theory behind the concepts that make up these animations, it’s time to implement them!

Let’s start by writing the following HTML for the Rainbow Button

      <button class="rainbow-btn">
       <div class="rainbow-btn-inner">Click Me!</div>
     </button>

• In the above code, we create a simple button using the <button> tag and inside it, add an inner div with the text Click Me!

Instead of creating a Single Element and adding the Click Me! Text, we are going with the above code because the Rainbow Button involves having 2 layers

1. The bottom layer consists of an always running Rainbow animation
2. This layer is semi-overlapped by a black container that is just small enough so that only a little part ( the borders ) of the rainbow animation is seen.
3. This overlapping layer become invisible on a mouse hover which exposes the complete rainbow animation underneath

Let’s first define what the two layers are and then work on each of them individually

The Bottom Layer  – ( class= “rainbow-btn” )

The bottom layer should be simple enough, as it is a constantly running rainbow animation

 .rainbow-btn {
 display: flex;
 justify-content: center;
 align-items: center;
 border: none;
 height: 50px;
 width: 250px;
 border-radius: 10px;
 color: white;
 font-size: 20px;
 background: linear-gradient(
   90deg,
   #ff0000,
   #ff7300,
   #fffb00,
   #48ff00,
   #00ffd5,
   #002bff,
   #7a00ff,
   #ff00c8,
   #ff0000
 );
 animation: bpx 15s linear;
 animation-iteration-count: infinite;
}

• In the above code, we first get started by declaring the element as flex and using justify-content and align-items to center the inner black container ( the front layer )
• Then, we remove the default button borders by using the border: none; property and set the border-radius to 10px to give the button a more rounded look
• We then set the button dimensions as 250×50 pixels
• Since the background is a rainbow we use a variation of the following colors

• Violet
• Indigo
• Blue
• Green
• Yellow
• Orange
• Red

• All of these colors can be combined by putting them in the linear-gradient property and rotating these colors at any angle ( 45deg or 90deg ) to make them look better
• After that, we make use of the bpx keyframe that is responsible for moving these colors across the button to give it an animated look.
• Since we want the animation to basically keep running forever, we set the animation-iteration-count to infinite

Let’s now create the bpx keyframe that we discussed earlier

@keyframes bpx {
 0% {
   background-position-x: 0px;
 }
 100% {
   background-position-x: 10000px;
 }
}

• To keep the rainbow colors changing, we make use of the background-position-x property.
• This property basically moves the background along the x-axis ( horizontally )
• For every iteration of this animation, we move the rainbow background by 10,000px in 15 seconds.
• After 15 seconds, the animation keeps repeating itself because we set the iteration count to infinity

The Front Layer – ( Inner Div )

Writing the CSS Code for the Inner Div should be pretty simple because it’s only a black container that loses the background color on hover

.rainbow-btn-inner {
 background-color: black;
 height: 46px;
 width: 246px;
 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: background-color 0.3s;
}

.rainbow-btn-inner:hover {
 background-color: transparent;
}

• Firstly, we set the height and width properties just a little bit less than the rainbow layer so that the colors are visible on the border of the black container.
• Then, we use flexbox properties, justify-content and align-items to center the inner text, “Click Me”
• As discussed, we make the background-color transparent on hover by using the :hover css selector.
• To make this background-color transition smooth, we make use of the transition property and set the duration to 0.3 seconds

And that’s it! The Rainbow Animated button should now be completely functional.

Working on the Rotating Border Animation Button

Just like how we worked on the previous button, let’s start by writing the HTML Code for this button

      <button class="translate-btn">
       <div class="up-transition"></div>
       <p class="translate-btn-text">Click Me!</p>
       <div class="low-transition"></div>
     </button>

The rotating border button also involves using two layers

1. The bottom layer is just a simple button that contains the Click Me text and a Black Border
2. The top layer consists of two divs, the up-transition and the low-transition
3. These <div>s are basically transparent containers that only have a red-border
4. One such div is placed in the top left and the other is placed on the bottom right
5. Both of these divs are initially zero sized ( width & height are 0 )
6. As soon as the button is hovered, the top left div starts expanding in two steps

1. Step 1 : Width Increases to 100%
2. Step 2: Height Increase to 100%

7. Then, the bottom right corner starts expanding and follows the exact same steps
8. Since both the <div>s are transparent and only their border is visible, the animation appears like the border is rotating starting from top left.

The Bottom Layer ( “Click Me!” Text )

.translate-btn {
 width: 250px;
 height: 50px;
 border: 2px solid black;
 background-color: white;
 font-size: 20px;
 transition: color 0.3;
 position: relative;
}

• We get started by setting the dimensions of the button to 250 x 50 pixels
• As discussed, we set the initial border color to black and give the button a background color of white
• Then, we increase the font size to 20px
• Since we are also changing the font color of inner text to red, we make use of the transition property and set the duration to 0.3 seconds
• We also need to set the position type of this element as relative, this is because we are positioning the children ( top layer <div>s ) in positions such as top-left and bottom-right

The Top Layer

.up-transition,
.low-transition {
 position: absolute;
 z-index: 1;
}

.up-transition {
 top: -2px;
 left: -2px;
 border-top: 2px solid red;
 border-right: 2px solid red;
}
.low-transition {
 bottom: -2px;
 right: -2px;
 border-bottom: 2px solid red;
 border-left: 2px solid red;
}

• Firstly, we set the position type of these elements to absolute. This means that they can be placed relative to the parent container ( the bottom layer )
• Since this is the top layer and we want it’s red border to overlap the existing black border of the bottom layer, we set it’s z-index to 1
• Then, we position the up-transition <div> in the top left using the top & left properties ( the -2px is so that this layer overlaps the existing 2px wide black border )
• Similarly, we position the low-transition <div> in the bottom right by using the bottom & right properties
• Lastly, we set partial borders for both of these <div>s by using the border-top, border-bottom, border-right and border-left properties

.translate-btn:hover {
 color: red;
}

.translate-btn:hover .up-transition {
 animation: anim1 0.3s ease forwards;
}

.translate-btn:hover .low-transition {
 animation: anim1 0.3s ease 0.3s forwards;
}

• In the above code, we work on the changes / animations that happen when the user hovers over this button
• Firstly, the font color of the inner text is changed from Black to Red by using the color property
• Then, we use the anim1 keyframe ( for now let’s assume that it travels the border partially ) for the top left div so that the border travels from top left to bottom right in 0.3 seconds
• Lastly, after the anim1 keyframe runs on the top left div, we make the same keyframe run on the bottom right <div> ( the bottom left div has a delay that waits for the top left <div>’s animation to finish ) so that the entire border turns red

Let’s now have a look at the keyframes for anim1 that we just used

@keyframes anim1 {
 0% {
   height: 0px;
   width: 0px;
 }
 50% {
   width: 248px;
   height: 0px;
 }
 100% {
   width: 248px;
   height: 48px;
 }
}

• In the above keyframe, we first start with a zero sized div, exactly like we discussed earlier
• Then, we increase the width of this invisible div to simulate that the border is traveling from left to right or right to left
• Lastly, we increase the height of the invisible div to show a similar effect that the border is traveling from top to bottom or bottom to top.

And that’s it! The button should now function exactly the same as shown above.

Working on the Flipping 3D Button Animation

Let’s get started on writing the HTML Code for the 3D Flip Animated Button

 <button class="flip-btn">
       <div class="btn-back">
         By clicking &thinsp;<a href="#">here</a> &thinsp; you confirm your
         subscription
       </div>
       <div class="btn-front">Hover me!</div>
</button>

• The above code consists of two <div>’s representing the front and the back of the flippable button.
• On the backside of the flippable button, there is a simple text containing a link asking for confirmation of the subscription. Whereas, the frontside contains a simple “Hover me!” text.
• These two <div>s are wrapped inside a parent container called flip-btn

Just like all of the buttons before, this also has two layers. But the difference is that, instead of keeping the layers transparent like before, we have two opaque layers and we see their content by flipping the button

CSS For the Parent Container

.flip-btn {
 width: 250px;
 height: 50px;
 border: none;
 background-color: transparent;
 transition: all 0.3s;
 position: relative;
}

• Firstly, we set the dimensions of the parent container to that of a standard button – 250 x 50 pixels
• Then, we turn the parent container invisible by removing the borders and making the background transparent
• To ensure smooth transitions / flipping, we use the transition property
• Since we will be positioning the child elements manually, we have to keep the parent container’s position relative using the position: relative; property

Creating the Front and Back Layer

Front Layer

.btn-front {
 background-color: lightblue;
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0%;
 left: 0%;
 border-radius: 10px;
 border: 2px solid transparent;
 display: flex;
 justify-content: center;
 align-items: center;
}

• We start by setting the background-color to light blue and setting the height and width to 100%
• Then, we align the front layer to the parent container by using position: absolute; and setting the top & left distances to zero
• After that, we add a 2px wide border and set its radius to 10px to give it a more rounded look.
• Lastly, we center the inner content by using flexbox and setting justify-content and align-items

Back Layer

.btn-back {
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: white;
 top: 0%;
 left: 0%;
 transform: rotateX(180deg);
 border: 2px solid lightgrey;

 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
}

• Just like the front layer, we use position: absolute; and position the element exactly in the same location as the front layer. This is so that these both layers appear to be glued together and behave like a single button.
• Then, we set the width and height of this element to 100% covering the entire button.
• Since this layer is on the back, the contents ( for eg, letters ) when flipped, will appear in the opposite direction – thus making the text unreadable. To avoid this, we internally flip the back layer by 180deg so that when we actually flip the button, it adds up to 180deg + 180deg = 360deg which makes the text readable
• After this, we center the inner text by using justify-content and align-items properties provided by flexbox.

Adding the 3D Flipping Mechanism

.flip-btn:hover {
 transform: rotateX(180deg);
}

The flipping part should be relatively simple, as we are just rotating the entire container by 180degrees on mouse hover

• In the above code, we make use of the rotateX function that rotates a container along the x-axis by any specified angle

And that finishes the process of making this button!  If everything went right, your results should match with the one shown above

Exercise: Working on the Color Filling Animation Button

It is possible to make the final button using only the techniques that we learnt above. That’s why it’s best that you try making the final color filling button on your own.

Hint

This button also involves two layers

• First Layer

This is simply a transparent layer with colored borders and inner text content

• Background Layer

This layer consists of a container that is initially empty and is gradually filled with color on hover

Solution

HTML Code

     <div class="fill-buttons">
       <button class="fill-button">
         <div class="text-layer">Fill from Top</div>

         <div class="bg-layer-top"></div>
       </button>
       <button class="fill-button">
         <div class="text-layer">Fill from Right</div>

         <div class="bg-layer-right"></div>
       </button>
       <button class="fill-button">
         <div class="text-layer">Fill from Left</div>

         <div class="bg-layer-left"></div>
       </button>
       <button class="fill-button">
         <div class="text-layer">Fill from Bottom</div>

         <div class="bg-layer-bottom"></div>
       </button>
     </div>

CSS Code

.fill-buttons {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}

.fill-button {
 width: 250px;
 height: 50px;
 margin: 5px;
 background-color: transparent;
 border: 2px solid lightgreen;
 position: relative;
}

.text-layer {
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

.bg-layer-left,
.bg-layer-top {
 position: absolute;
 top: -1px;
 left: -1px;
 background-color: lightgreen;
 z-index: -1;
}

.bg-layer-bottom,
.bg-layer-right {
 position: absolute;
 bottom: -1px;
 right: -1px;
 background-color: lightgreen;
 z-index: -1;
}

.text-layer:hover ~ .bg-layer-left,
.text-layer:hover ~ .bg-layer-right {
 animation: fillh 0.3s ease forwards;
}
.text-layer:hover ~ .bg-layer-top,
.text-layer:hover ~ .bg-layer-bottom {
 animation: fillv 0.3s ease forwards;
}

@keyframes fillh {
 from {
   height: 50px;
   width: 0px;
 }
 to {
   height: 50px;
   width: 249px;
 }
}

@keyframes fillv {
 from {
   height: 0px;
   width: 249px;
 }
 to {
   height: 50px;
   width: 249px;
 }
}

Conclusion

Congratulations on coming this far and completing this tutorial. Hopefully, you’ve successfully finished the final exercise and really solidified all the concepts that you learnt today. We discussed a lot of topics starting from scratch such as Animations, Keyframes and Transitions. However, it doesn’t end here, there is a lot more you can explore and tons of other designs to try out. This is especially true once you start working with Javascript as it can unlock the possibilities and types of designs that are possible. If you liked this tutorial and learnt something from it, do share it with your friends!