Code Snippet </> Info
Snippet Name: HTML5 CSS Label Tags
Description: Add colorful label tags using strictly CSS.
Example: View Code Demo
Note: Adjust the color styles to your preferences.
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2019-12-09 02:01:16
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS Label Tags</title>
<style>
/* Begin HTML5 CSS Label Tags */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
* {padding:0px; margin:0;}
body {font-family:verdana,arial,ms sans serif;font-size:90%;color:#000000;}
#labeltag {padding:50px;}
.tag {font:10px/1 sans-serif;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.43, rgb(250,192,75)),color-stop(0.7, rgb(252,219,110)));background-image:-moz-linear-gradient(center bottom,rgb(250,192,75) 43%,rgb(252,219,110) 70%);border:1px solid #cc912d;color:#986538;display:block;float:left;clear:both;font-weight:700;margin:0 0 20px;padding:6px 6px 6px 8px;position:relative;text-transform:none;z-index:1;border-radius:0 3px 3px 0;}
.tag:after {content:"";display:block;background-image:-webkit-gradient(linear,100% 100%,0 0,color-stop(.3, rgb(250,192,75)),color-stop(.7, rgb(252,219,110)));border:1px solid #cc912d;border-right:0;border-top:0;position:absolute;height:15px;left:-9px;top:3px;width:15px;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);}
.tag:before {content:"";display:block;background-color:#fff;border-radius:10px;box-shadow:inset 1px 0 1px #eee;border:1px solid #cc912d;position:absolute;height:5px;top:8px;left:-3px;width:5px;}
a.tag {text-decoration:none;text-transform:none;}
a.tag:hover {text-decoration:underline;}
#example {padding:50px;}
</style>
</head>
<body>
<div id="example"><h3>HTML5 CSS Label Tags Example</h3></div>
<div id="labeltag">
<span class="tag">Sale!</span>
<span class="tag">a tag that grows with the text</span>
<a href="#" class="tag">a linked tag that grows with the text</a>
</div>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_132.html">HTML5 CSS Label Tags</a> page. ]
</div>
</body>
</html>
|