7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. CSS

Quickly Build a Swish Teaser Page With CSS3

Scroll to top
Read Time: 8 mins

In this tutorial, you'll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that's getting ready to launch.

Step 1: The HTML Markup

The HTML for the teaser page is quite simple. We just have a container with our introductory text and inputs.

Step 2: Positioning and Sizing Our Elements

Let's give our page some structure. We start out with the basics, and position the container in the center of the page. We'll use positioning of 50%, then negative margins to bring the object back half its width and height.

Next, we position the text and inputs, using attribute selectors to target the email and submit inputs separately.

Step 3: Styling the Text

Styling the text for this page is quite simple. We want the name to contrast with the background, so we'll make it white. The text is important, but we want visitors to remember the name of our product, so we won't make it as pronounced. The Twitter link is underlined, indicating that it's a link.

First, the main text:

Then the Twitter link:

Step 4: Styling the Background

Now for the fun part: giving the objects on our page that extra je ne sais quoi. We'll start by creating a nice gradient background. If you're a Mac user you can lean on GradientApp to do the hard work for you. Alternatively, head on over to CSS3 Please! to get some idea of the syntax.

Step 5: Styling the Subscribe Form

The subscribe form is the focus of our page, since we want visitors to find out when our amazing product is released. We want it to be the focus of the page, after the name or logo.

We start by styling the placeholder (Mozilla and Webkit specific styles), and setting a font-size:

Now let's give the field and button some color and depth:

Step 6: Adding CSS Transitions

Let's add some nice CSS transitions to help grab visitors' attention.

First, we'll add hover and active states to the Twitter link and inputs:

Then we add the transition rules:


Step 7: CSS Animations

We can also add some nice CSS3 animations for an added effect when the page loads. It's advisable to use CSS animations as a compliment to your design; not an integral part of it. Support for animations is still sparse and you should be wary of over-complicating your design for the sake of it.

That said, Dan Eden's Animate.css is a really useful CSS animation library. You can add it as shown in the original document at the beginning of the tutorial, or import it into your stylesheet, if you'd prefer:

There are a variety of beautiful animations to choose from, but I'm going to add the bounceInDown animation. We apply it to our element (in this case the container) like so:

If you want to change the animation, you just change the -animation-name to the name of the animation you'd like.

Step 8: Taking Things Further

This isn't a responsive design, far from it, but you might want to add a couple of media queries to the bottom of your css to cater for smaller devices. Think about making the container element narrower for smaller screens, and altering the width or positioning of the inputs.

To allow our signup form to add email addresses to a list, we could do with wiring it up to a email newsletter service, such as MailChimp. I'm not going to explain this in detail, since this article demonstrates it perfectly.

If you'd like to add validation to the form, you can check out this tutorial.


Building a quick teaser page like this one is vital for publicity before a website or product launch. It needn't be complex, as this pure CSS solution shows.

I hope you learned something from this tutorial, thanks for reading!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.