floating text on link button

Add floating text next to link or button

Floating text next to a link or button can be a good way to show additional information about a specific link or button. Also, it helps catch more user attention to that specific link or button.

fancy light stream effect on button hover

Fancy light streak on Button hover effect

Adding a fancy button on simple layout just adds that ‘pop’ factor to the page. Here is how you can add fancy looking button with light streak on hover action.

colored li ol bullets numbers css

Different color bullets or numbers in the list

By default, li list items will show same color bullets (when using un-ordered list ul) and same color numbers (when using ordered list ol). You can easily color to these by targeting marker pseudo element.

headline before after lines effect

Lines before and after headline text

Adding line before and after text is a classic CSS effect. However, defining size of these before and after lines can be challenge which can be easily dealt with by using grid columns for dynamic widths.

image 3d tilt effect

Image with 3D perspective tilt effect

Adding subtle 3D perspective to an image makes it standout easily. We have already seen image in heart shape and the trendy blob shape effect. Here is another image effect, would look great for person profile photos – specially on about page.

number cut off with slash line

Big number cut off effect with slash line

Making a big number cut off with a line effect done with CSS only. Now, this effect looks cool but it also has its limitations. Please Note: You would need to adjust the code for cut off line positioning depending on the font size, font type in the use.

button with blur effect over-background image

Button with Blur effect over background image

If your layout is using a big section with a detailed background image, then adding a button with blur effect makes it less intrusive and yet visible for visitors to click. Note: This effect does not work in the Firefox browser (yet).

gradient effect on text multiple colors

Add gradient to text with multiple colors

We just saw how to use gradient as border for images and make them look fancy. Similarly, multi color gradient effect can be applied to the normal text (looks good specially on headlines).