How to Create Fancy Boxes with CSS

Ever since I shared my tutorial on doing content upgrades in MailerLite I’ve been asked how to create pretty, styled boxes for your own content upgrades and other content.

Today I’m going to share with you some simple code and CSS that will let you add your own branded boxes into your website! Watch the tutorial video below for the best experience and I’ll also talk a bit about CSS so you can understand how to edit it yourself.

HTML

Put this where you want your box to go. Change your heading and button text and url (the href) to what you want it to be. If you have a code from MailerLite or your email marketing tool then you can replace the link (a tag) with that. 

You also could use these boxes for things other than content upgrades. Quotes, click to tweets, tips, and anything else you can think of would look great in a snazzy box!

<div class="fancy-box">
<p class="fancy-heading">This is where you put an amazing title!</p>
<a href="#" class="fancy-button">Click Here</a>
</div>

CSS

This is where all the styling comes into play. You’ll notice that the CSS class names match the assigned class on the HTML above. Feel free to change them but make sure you replace them in the HTML as well.

.fancy-box {
background: #666;
color: #fff;
text-align: center;
border: 5px solid #444;
border-radius: 5px;
padding: 10px;
margin: 1em 0;
}
.fancy-box .fancy-heading {
font-family: Arial;
font-size: 32px;
}
.fancy-box .fancy-button {
background: #fff;
color: #666;
padding: 1.5em;
}

Video Tutorial

I apologize for the background noise in the video! My dogs claws are very loud on our floors 

If you have a border on your button like you may have seen in the video, just add border-bottom: 0; to your button’s CSS codes.

Need more help? Leave a comment below and let me know!

Enjoyed this? Please consider sharing 💕

How to Create Fancy Boxes with CSS
Heya, I'm Shaylee!

Heya, I'm Shaylee!

When I'm not stuffing my face with sushi or being forced into dog pets I help bloggers and business owners tackle the tech and make WordPress less confusing.

Find Out More

6 thoughts on “How to Create Fancy Boxes with CSS”

    • That’s a great question! I do this “just in case” the first font doesn’t show up or the person viewing my site can’t see it. In that case, the next font in the series will be used instead, and so on and so forth. It’s just a fallback method so your fonts don’t look ugly if they don’t work 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.