Home > Tutorials > HTML/CSS/JS Tutorials > Square CSS Badges

Square CSS Badges

I was playing around with CSS earlier today and came up with something rather interesting, I call them CSS badges since I’m really not sure what else to call them.The code behind these buttons is actually extremely simple and I have commented it along the way so you could easily see what controls what.

Adding an icon to the badge like I did is a matter of simply replacing the text with an IMG tag (such as <img src=”mypicture.png”>). You can easily modify these badges to include links, or get rid of the border completely and create an interesting Initial out of it for your posts/pages.

<style type=”text/css”>
/*This declaration defines the outside border.*/
.button { border: 1px solid rgb(148, 0, 211);
text-align: center;
font-family: Times New Roman,Times,serif;
/*This is where you set the width for your button.*/
width: 4.6em;
}
/*This declaration defines the top part of the button.*/
.button_top { text-transform: uppercase;
margin-left: 2px;
padding-left: 2px;
margin-right: 2px;
padding-right: 2px;
color: rgb(148, 0, 211);
font-family: Times New Roman,Times,serif;
font-size: 240%;
text-decoration: none;
}
/*This declaration defines the bottom part of the button.*/
.button_bottom { margin-left: 2px;
padding-left: 2px;
margin-right: 2px;
padding-right: 2px;
background-color: rgb(148, 0, 211);
color: rgb(255, 255, 255);
margin-bottom: 2px;
font-family: Times New Roman,Times,serif;
font-size: small;
text-decoration: none;
}
</style>
<div class=“button”>
<div class=“button_top”>rp</div>
<div class=“button_bottom”>RapidPurple</div>
</div>

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

How To Populate A DIV via an HTML SelectBox, PDO, and jQuery

Imagine you have a database full of information, and you want to let users browse ...

Like every other website, this site uses cookies to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close