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.
Blocks
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.
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.
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 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.
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
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).
Use background image on text instead of color
Besides using fancy gradient in place of the usual text color, you can go to the next level by using background image for even more fanciness.
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).
Add gradient color border to images
Want to add pop to images? How about mixing few colors and rendering gradient border to images in your layouts?