4 easy ways to add some Visual Pizzaz to your site

Here's four easy ways to add a little style to your website, with just a few lines of code.

1. Make the button/link pulse on hover.

This effect is subtle, but noticeable, Just increasing the size of an element a little bit when the user hovers over it. For an example, See the nav bar on my Tacocat Project Page. The code for this is quite simple, in your css style, define a new style, I called mine nav-hover for easy reference, that contains the line transition:all 250ms; you can change the time if you like, but 250ms feels about right. Then you need another definition with a :hover right after. For my nav-hover class it looks like this:

.nav-hover {
    transition: all 250ms;
}
.nav-hover :hover {
            transform: scale(1.1);           
}

You can increase the scaling if you like (or even use a value less than 1 to shrink it) and apply the class to whatever you like.

2. SweetAlerts

Vanilla Javascript alerts look plain and boring, sweetalerts is a great library that is super simple to use. Just import their cdn (found at their website) at the bottom of your html page. And put any of the premade recepies in your js file, then tweak to your liking. I tend to use their simple error message as a starting point, but there are many more!

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href>Why do I have this issue?</a>'
})

3. AnimateCss

Something I found out about from SweetAlerts was that their library can use Animate.css for more complex animations. In the same way, their cdn is all you need, then you can add the animation classes directly to your html elements!

4. Confetti

When the user does something great, or you just want a bit of a celebration to finish a process running, look no further than confettijs This script allows you to trigger a brief confetti animation with a line of Javascript. You just need confetti.start(1000) replacing that number with the amount of miliseconds before the animation should stop. No need to set a timeout seperately!

As a bonus, if you want to customize the color of the confetti, just edit the colors array on line 29 of their js module, inserting in whatever rgb color you like in the following format :"rgba(255,0,0,", "rgba(0,0,255,", "rgba(128,0,128,", "rgba(202,218,210,"

What are some quick things you've used to improve the look of your website and give it a bit of flash?