Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create a Checkmark / Tick with CSS
Creating a checkmark (tick) symbol with pure CSS is useful for custom form controls, success indicators, and interactive elements. CSS allows us to create checkmarks using borders, pseudo-elements, or transforms without requiring icon fonts or images.
Syntax
.checkmark {
/* Create using borders and rotation */
border-right: 2px solid color;
border-bottom: 2px solid color;
transform: rotate(45deg);
}
Method 1: Using Borders and Transform
This method creates a checkmark by styling a div with bottom and right borders, then rotating it 45 degrees −
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 30px;
text-align: center;
font-family: Arial, sans-serif;
}
.checkmark {
display: inline-block;
width: 20px;
height: 35px;
border-bottom: 5px solid #4CAF50;
border-right: 5px solid #4CAF50;
transform: rotate(45deg);
margin: 20px;
}
.large-check {
width: 30px;
height: 50px;
border-bottom: 8px solid #2196F3;
border-right: 8px solid #2196F3;
}
</style>
</head>
<body>
<h3>Simple Checkmarks</h3>
<div class="checkmark"></div>
<div class="checkmark large-check"></div>
</body>
</html>
Two checkmarks appear: a green checkmark of medium size and a blue checkmark that is larger, both created using CSS borders and rotation.
Method 2: Using Pseudo-elements
This approach uses ::before and ::after pseudo-elements to create a more complex checkmark with a background container −
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 30px;
font-family: Arial, sans-serif;
}
.checkbox-container {
position: relative;
width: 50px;
height: 50px;
background-color: #f0f0f0;
border: 2px solid #ddd;
border-radius: 8px;
margin: 20px;
display: inline-block;
}
.checkbox-container::before {
content: "";
position: absolute;
left: 18px;
top: 12px;
width: 8px;
height: 16px;
border-bottom: 3px solid #4CAF50;
border-right: 3px solid #4CAF50;
transform: rotate(45deg);
}
.success-check {
background-color: #4CAF50;
border-color: #4CAF50;
}
.success-check::before {
border-color: white;
}
</style>
</head>
<body>
<h3>Checkmark with Container</h3>
<div class="checkbox-container"></div>
<div class="checkbox-container success-check"></div>
</body>
</html>
Two checkbox containers appear: one with a gray background and green checkmark, and another with a green background and white checkmark, demonstrating different styling approaches.
Method 3: Animated Checkmark
This example creates an animated checkmark that appears with a smooth transition −
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 30px;
font-family: Arial, sans-serif;
}
.animated-check {
position: relative;
width: 60px;
height: 60px;
background-color: #4CAF50;
border-radius: 50%;
margin: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.animated-check::after {
content: "";
position: absolute;
left: 22px;
top: 16px;
width: 8px;
height: 16px;
border-bottom: 4px solid white;
border-right: 4px solid white;
transform: rotate(45deg) scale(0);
transition: transform 0.3s ease;
}
.animated-check:hover::after {
transform: rotate(45deg) scale(1);
}
.animated-check:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h3>Hover to See Animation</h3>
<div class="animated-check"></div>
</body>
</html>
A green circular button appears. When hovered, it scales up slightly and a white checkmark animates into view, creating an interactive effect.
Conclusion
CSS checkmarks can be created using borders with rotation, pseudo-elements, or animation effects. The border method is simplest, while pseudo-elements offer more design flexibility for custom form controls and success indicators.
3K+ Views
