Postfix Badge Button

Developer
Kendrick Arnett
Size
2,345 Kb
Views
32,384
  1. Postfix Badge Button Previews
  2. Postfix Badge Button HTML Codes
  3. Postfix Badge Button CSS Codes

How do I make an postfix badge button?

What is a postfix badge button? How do you make a postfix badge button? This script and codes were developed by Kendrick Arnett on 11 August 2022, Thursday.

Postfix Badge Button Previews
IQ Test

Postfix Badge Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Postfix Badge Button</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="button badge" data-badge-count="31"><span class="button-text">

Postfix Badge Button - Script Codes CSS Codes

html { font-size: 2vw;
}
@media (max-width: 420px) { html { font-size: 8px; }
}
@media (min-width: 990px) { html { font-size: 20px; }
}
.button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: solid 1px #1667a1; border-radius: 2px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); font-family: "Open Sans", Arial, sans-serif; font-size: 2rem; font-weight: 300; color: #1667a1; padding: 0.5rem; min-height: 2rem; min-width: 2rem;
}
.badge:after { font-size: 0.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #ca4848; border-radius: 0.25rem; color: white; margin-left: 0.5rem; padding: 0.1rem 0.3rem; content: attr(data-badge-count);
}
Postfix Badge Button - Script Codes
Postfix Badge Button - Script Codes
Home Page Home
Developer Kendrick Arnett
Username kendrick
Uploaded August 11, 2022
Rating 3
Size 2,345 Kb
Views 32,384
Do you need developer help for Postfix Badge Button?

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!

Kendrick Arnett (kendrick) Script Codes
Name
Reasonably Shadowed Button
Preliminary Tags
Inline Styled SVG Icons
Media Queries via include-media
Pulse for Skeleton Screens
Duotone Fixed Backgrounds
SVG Social Icons
Flexbox Grid
SVG Button
A Pen by Kendrick Arnett
Create amazing Facebook ads 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!