CSS-only link confirm dialog

Developer
Kevin Weber
Size
2,601 Kb
Views
66,792
  1. CSS-only link confirm dialog Previews
  2. CSS-only link confirm dialog HTML Codes
  3. CSS-only link confirm dialog CSS Codes

How do I make an css-only link confirm dialog?

NOTE: This is not perfectly working on some touch devices.This pattern requires users to click a second time to open a link. No JavaScript. No ugly alert popup.. What is a css-only link confirm dialog? How do you make a css-only link confirm dialog? This script and codes were developed by Kevin Weber on 20 November 2022, Sunday.

CSS-only link confirm dialog Previews
IQ Test

CSS-only link confirm dialog - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-only link confirm dialog</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="styling-center"> <div class="link-confirm styling-before-confirm"> Switch page <input type="button"> <a href="switch-page.html" class="styling-confirm" target="_blank">Really?<span>Click to confirm</span></a> </div>
</div>
</body>
</html>

CSS-only link confirm dialog - Script Codes CSS Codes

.link-confirm { position: relative;
}
.link-confirm input,
.link-confirm a { height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
.link-confirm input { cursor: pointer; opacity: 0;
}
.link-confirm a { display: none;
}
.link-confirm input:active + a,
.link-confirm input:focus + a,
.link-confirm a:hover { display: inline-block;
}
html,
body { display: table; text-align: center; width: 100%; height: 100%;
}
.styling-center { display: table-cell; vertical-align: middle;
}
.styling-before-confirm { border: 2px solid #4e97cc; border-radius: 4px; display: inline-block; letter-spacing: 1px; margin: 10px; padding: 20px;
}
.styling-before-confirm:hover { background: rgba(78, 151, 204, 0.1);
}
.styling-confirm { background: #4e97cc; box-sizing: border-box; color: #fff; padding: 15px 20px; text-align: center;
}
.styling-confirm span { display: block; font-size: 10px;
}
CSS-only link confirm dialog - Script Codes
CSS-only link confirm dialog - Script Codes
Home Page Home
Developer Kevin Weber
Username kevinweber
Uploaded November 20, 2022
Rating 3
Size 2,601 Kb
Views 66,792
Do you need developer help for CSS-only link confirm dialog?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Weber (kevinweber) Script Codes
Name
Zoom background cover image on hover
SqueezeText demo
Fill circle from bottom to top in percent
Animated Video Play Button by Adobe
Change link color from left to right
Mark text on hover
CSS triangles
CSS Loading Animation Circle
Logo icon and text animation
Slack Icon Letter Generator
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!