To center a button vertically and horizontally with CSS, use the justify-content and align-items properties. We have used flex in our examples. The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; justify-content: /*value*/ } The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the ... Read More

To center an element vertically and horizontally with CSS, use the justify-content and align-items properties. We have used flex in our examples. The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; justify-content: /*value*/ } The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the center ... Read More

To create a flip box with CSS, the code is as follows −Example Live Demo    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;       margin:20px;    }    .flipCard {       background-color: transparent;       width: 300px;       height: 300px;       perspective: 1000px;    }    .innerCard {       position: relative;       width: 100%;       height: 100%;       text-align: center;       transition: transform 0.6s;       transform-style: preserve-3d;       box-shadow: ... Read More

To zoom/scale an element on hover with CSS, we will be using two different approaches. In this article, we will be understanding these two approaches to explain how to zoom/scale an element on hover with CSS. We are having two examples in each approach where we have a div element and an image, our task is to zoom div and image element on hover with CSS. Approaches to Zoom/Scale an Element on Hover Here is a list of approaches to zoom/scale an element on hover with CSS which we will be discussing in this article with stepwise explaination and complete ... Read More

On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property. Set the tree view root The root for the tree view is set using the . Within that, is set − ... Read More

To switch between dark and light mode with JavaScript, the code is as follows −Example Live Demo    body {       padding: 25px;       background-color: white;       color: black;       font-size: 25px;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .dark-mode {       background-color: black;       color: white;    }    .toggleButton {       padding: 12px;       font-size: 18px;       border: 2px solid green;    } Toggle Dark/Light Mode Example Toggle dark mode Click the above button to toggle dark mode    document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode);    function toggleDarKMode() {       var element = document.body;       element.classList.toggle("dark-mode");    } OutputThe above code will produce the following output −On clicking the “Toggle dark mode” button −

On a web hosting website, you must have seen the price plans. Also, on a website that sell membership, a pricing comparison table is visible. Such tables compare the features of the various plans, for example, free and paid, or free, business, enterprise, etc. plans. Let us see how to create a responsive pricing table with CSS i.e., how will such tables will be visible on different devices. Compare Fields Set the fields for comparison. For that, you can use the and mention the features. Here, we have shown a single plan i.e., pricing table for free membership i.e. ... Read More

To create fixed/sticky header on scroll with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin: 0px;       padding: 0px;       height: 150vh; /*To produce scroll bar*/    }    .header {       width: 100%;       background-color: rgb(52, 21, 110);       color: white;       padding: 50px;       font-size: 20px;    }    div.sticky {       position: fixed;       top: 0; ... Read More

To create a gradient background color on scroll, the code is as follows −Example Live Demo    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       background: linear-gradient(          141deg,          #a47dff 0%,          #4e28a7 40%,          #22053d 65%,          #72a4ff 75%       );    } Change Background Gradient on Scroll Example Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos. Scroll to see the effect. OutputThe above code will produce the following output −While scrolling the gradient will shift from dark blue to light blue −

The smooth scrolling effect can be set on a web page using the scroll-behaviour property. Set the value to smooth. Check this by implementing scrolling effect on the click of buttons i.e., reaching the below section by clicking a button the top, and vice versa. Let us see how to create a smooth scrolling effect with HTML and CSS. Smooth scrolling for the web page To begin with, under the , set the scroll-behaviour property to implement the property for thr entire web page − html { scroll-behavior: smooth; } Set the two sections The ... Read More