Go from www to WOW with this simple CSS trick.

blog-banner-css.jpg

Ok, this "simple" CSS trick is only simple if you know your HTML and CSS fundamentals. But these easy-to-implement properties can make your website a lot more engaging for your web audience. I am talking about CSS3 transformations & transitions and they are a lot of fun.

First up... the background color transition. Here's your code:

.color-button{
background: #f04c35;
}

And here is the result:

Next we have the scale transition. Here's your code:

.scale-button{
transform: scale(1.3);
}

And here is the result:

Next we have the translate transition. You can see this one in use on our homepage. Here's your code:

.translate-button{
transform: translateY(-6px);
}

And here is the result:

Finally we have the scale transition. Here's your code:

.rotate-button{
transform: rotateY(180deg);
}

And here is the result:

There is extra code that can be used to further customize the transformations. Easing in and easing out of transforms can adjust the pacing and overall feel of the animation. Feel free to inspect the elements on this page to dig deeper or check out w3schools breakdown of transitions here, and their transform property documentation here

Teddy Tedford | Graphic Designer | Marketing Strategist
 
Partner up with Adcoast for expert marketing, design, support and advice. Want more customers? Let's talk about your marketing and advertising strategy. Consultations are always free and we are available to answer your questions seven days a week.