Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> HTML5 CSS Label Tags


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: 2015-08-26 22:46:21

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library