How To Redirect A Web Page With CSS?
Last Updated :
16 Sep, 2024
The work of redirecting a web page is done through server-side scripts or JavaScript. CSS by itself cannot perform direct redirection, but together with other means, it can produce an effect of redirection.
Here is an overview of the approaches you can use for indirect redirecting of the page using CSS. In this article, we note some of the ways you can perform redirects using CSS:
Prerequisites
These are the approaches to redirect a web page in CSS :
HTML has a provision for an automatic refresh of a page or taking the user further to any other URL after some time using a <meta> tag. This method does not involve CSS directly in the process of redirection but can be complemented with CSS to offer a better experience during the waiting period.
Syntax:
<meta http-equiv="refresh" content="3;url=https://example.com">
Example: This example shows CSS-based redirect using meta refresh tag to inform user that redirection is taking place.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh"
content="3;url=https://example.com">
<!-- Here 3 is delay -->
<title>Redirecting...</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20%;
background-color: #f0f0f0;
color: #333;
}
.message {
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="message">
You are being redirected to
<a href="https://example.com">
Example.com</a>.
If you are not redirected
automatically,
<a href="https://example.com">
click here</a>.
</div>
</body>
</html>
Output
2. CSS Overlay with JavaScript Redirection
This approach involves the use of CSS to create an overlay that can be used, visually, for this purpose; that is, to inform the user a redirection is to take place. One may want to add a message or an animation to the overlay to further enhance the user experience. The actual event of being taken to another page is powered by the use of JavaScript after a certain delay.
Syntax:
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
color: #333;
z-index: 1000;
}
Example: This example shows CSS overlay with JavaScript redirection to inform user that redirection is taking place.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
color: #333;
z-index: 1000;
}
</style>
</head>
<body>
<div class="overlay">
Redirecting you to
<a href="https://example.com">
Example.com</a>...
</div>
<script>
setTimeout(function() {
window.location.href =
'https://example.com';
}, 3000);
</script>
</body>
</html>
Output
3. CSS-based Transition with JavaScript
The idea of this approach is to create an illusion of any action that would lead to a redirect using a CSS transition or animation, and after the transition/animation is complete, trigger the actual redirection mechanism via JavaScript. That would be ideal to create a much more dynamic feeling for the user.
Syntax:
.fade-out {
animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Example: This example shows CSS-based transition with JavaScript to inform user that redirection is taking place.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<style>
body {
margin: 0;
font-family: Arial,
sans-serif;
text-align: center;
padding: 20%;
background-color: #f0f0f0;
color: #333;
transition: opacity 2s;
}
.fade-out {
animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body class="fade-out">
<div>
You are being redirected to
<a href="https://example.com">
Example.com</a>. If you are
not redirected
automatically,
<a href="https://example.com">
click here</a>.
</div>
<script>
setTimeout(function () {
window.location.href =
'https://example.com';
}, 2000);
</script>
</body>
</html>
Output:
4. CSS Pseudo-elements with JavaScript
An overlay effect or message saying something like 'Now redirecting.' can be achieved by using CSS pseudo-elements ::before and ::after, when actual redirection-after a few seconds or user action-will be handled by JavaScript. This would utilize the power of CSS to visually represent and pseudo-elements to add content without actually touching the HTML structure.
Syntax:
.overlay::after {
content: "Redirecting...";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
Example: This example shows redirecting with CSS pseudo-elements with JavaScript to inform user that redirection is taking place.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirecting...</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
text-align: center;
padding: 20%;
background-color: #f0f0f0;
color: #333;
position: relative;
}
.overlay::after {
content: "Redirecting...";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
z-index: 1000;
}
</style>
</head>
<body>
<div class="overlay"></div>
<script>
setTimeout(function () {
window.location.href =
'https://example.com';
}, 3000);
</script>
</body>
</html>
Output:
Similar Reads
How to Create Printer-Friendly Pages with CSS ?
Creating printer-friendly pages with CSS involves modifying the styling of your web pages specifically for printing purposes. Importance of printer-friendly pagesPrinter-friendly pages ensure that information is accessible to a wider audience including those who may rely on printed materials.Printer
3 min read
How to read CSS rule values with JavaScript?
DOM (Document Object Model) object can read and manipulate CSS rules. We can use the following approaches to read all the Embedded CSS rules using JavaScript. Using getElementsByTagName() MethodUsing window.getComputedStyle() MethodApproach 1: Using the getElementsByTagName() MethodUse document.getE
3 min read
How to redirect a page to another page in HTML ?
Redirecting a page in HTML involves sending users to a different web page automatically or upon interaction. This can be achieved using the anchor tag's href attribute or the meta tag with the http-equiv attribute set to refresh and the content attribute specifying the time delay and destination URL
3 min read
How to Add Redirects in Apache?
The redirects are one of the most important configurations that allow a web server to redirect traffic from one URL to another. This would help you forward visitors to a new location whenever content changes its location, or it will let you show multiple URLs under one canonical URL. In this article
3 min read
What Happens To CSS When We Load a Page?
Although we know how to write the code of the HTML and CSS many developers don't know how the HTML and CSS will be processed by the browser. If you don't know how the HTML and CSS will be processed then don't worry I am here to help you. This article will help aspiring developers and developers work
3 min read
How to Redirect to Another Page in ReactJS ?
In ReactJS, when you need to move users from one page to another, we can use the built-in React Router library, which is designed specifically for handling navigation within a React application.ApproachUse the Navigate component: In React Router v6, the Navigate component helps us to redirect users
6 min read
How to use Meta Tag to redirect an HTML page?
Using a meta tag to redirect an HTML page involves placing an <meta> element in the document's <head> section, specifying the http-equiv="refresh" attribute along with a time delay and the target URL, automatically redirecting users after the specified delay.Syntax<meta http-equiv = "
1 min read
How to Apply CSS Property To an iframe ?
HTML iframe is used to embed external content such as videos, maps, or entire web pages into another webpage. The iframe stylings are used to set the width, height, border, ..., etc. of the iframe box. You can apply CSS styles to iframe in three different ways i.e. inline, internal and external CSS.
2 min read
How to redirect to multiple websites with a delay using JavaScript ?
We have given multiple websites and the task is to redirect to multiple websites with some delay using JavaScript. We will use setTimeout() function to delay the website. setTimeout() Function: The setTimeout() method executes a function, after waiting a specified number of milliseconds. The first p
2 min read
ES6 Page Redirect
The ES6 page redirect is used to send a request to different website addresses to the user and browser search engine, (search engine and user receive da ifferent website address that was requested by the search engine or the user). Redirecting to a different page that was not requested by the user o
3 min read