Animated Link Underlines w/ Pure CSS

Recently I’ve been making some updates to my blog’s theme to make it simpler and cleaner.

One of the changes that I made was to add a small animation to the hover effect of the main menu. Subtle animations can go a long way to adding polish and quality to your UI/UX designs, and with the help of CSS3, many of these animations can be done with pure css.

In this case, I wanted to add a bottom border to each menu item that ‘opened’ when a user hovers over the link. This technique can be used for any type of text link on your website, and it’s relatively easy to create a class for this behavior.

Here’s an example of a link with this behavior:

This is a fake link – hover over me to see the animation

To start, let’s take a look at how my theme (based on reverie3) renders the main menu items:

Notice in the example that the third list item (for “Contact”) has the class active. This will always be the current menu item (if available).

Previously, the menu had a hover effect and active class that simply added a border to the bottom of the active menu item, and changed the colour of the menu text:

Now, to add my animation there were a few options, but the easiest is to use the CSS Pseudo element :after to both add the underline, and animate it.

First, we’ll change the selector for the border to be the new pseudo element:

This code will create a new pseudo element underneath our list item li elements that will contain our border. As it stands, the border will appear for all list items however. So instead, we want the default to be an invisible border:

Adding the width attribute will make the border invisible for all elements. Now we want to make sure that the border displays on our active and hover elements:

Great! Now we’re back to the same functionality as we had at the beginning. A link that when hovered or active, has a border-bottom of 2px. But we still need to animate the border when a visitor hovers over the element. To do so, we can use CSS3’s transition attribute:

By adding a transition to the element, a visitor’s browser will automatically calculate the animation for you, without the need for javascript or any other scripting. I’ve also added the margin: 0 auto; to the li element to make sure that the animation starts from the center instead of from the left side.

The final result will be what you see on the main menu of this blog. To turn this into a class structure that you can use on your own website, you can simply write your css like this:

I hope this helps in your projects. Let me know if you have any questions in the comments below!

Share on FacebookTweet about this on TwitterShare on Google+

It’s just as easy to not be a sleaze ball

Building a business is difficult.

Even when it’s a get rich “quick” scheme, or a “make so much money you’re going to need a dump truck for all of the cash” scheme.

I started in digital marketing working for a company that sold e-books that teach people how to sell e-books.

Sounds silly doesn’t it.

But it’s a huge industry…

… and a pretty shitty one.

After all, you’re not selling the content of the e-book. You’re selling the dream of a future. The dream of a better life. One that’s easy, and full of umbrella drinks, beaches, women and fast cars.

True, some of the companies selling information products do it well. And some even provide value.

But most just sell dreams and bullshit.

That have no real value to give aside from the rehashed bullshit that they learned from some other no-value e-book or course.

The sad part is this.

Creating a business selling fluff is just as difficult as creating a business that sells something valuable.

Take all of the effort you put into building landing pages, creating content, and writing guest posts for your lame e-book, and put that into a real, sustainable, valuable product.

See what happens.

You might actually change someone’s world for the better. You might actually create a business that’s worth working for. You might actually build a business that lasts longer than your PPC campaigns, or even, spreads by word of mouth.

But regardless of what happens, you’ll be doing something worth doing.

Share on FacebookTweet about this on TwitterShare on Google+

Someone will always miss the point

No matter what you do, what content you write, what action you take, what position you take, what battle you fight…

… someone will always miss the point.

Just look at the comment section of any controversial piece of content – someone will undoubtedly be ranting about grammar, about semantics, about some entirely different topic altogether.

Or create a software product (like I did). Some of your users won’t understand, and won’t find the value that others do.

Yes, you can use this feedback to improve what you do.

Write more clearly…

Explain things in more depth…

Use a spell checker…

Build better products…

But no matter how polished your work, there will always be someone that doesn’t get it.

And that’s ok.

Because as long as you have a group that does get it, you have a group to focus on.

It’s precisely the group the gets it – the group that understands and gets excited about the work – that will spread the message. This group is why you do your work. This group is who will speak up and talk about what you’ve done. This group will convince others – maybe even some who just didn’t get it – that there is value to be had.

They are your evangelists. Work for them.

Share on FacebookTweet about this on TwitterShare on Google+

My New Project: Easy Website Surveys With MARE.io

My latest project started as a simple WordPress plugin. I loved the idea of collecting real-time user feedback from visitors and users of websites. Really getting to know my visitors.

This feedback could give me insights into what my visitors were thinking, with a high amount of context (I could ask questions about specific pages).

There were a few services that already did this. Qualaroo and Hotjar did it pretty well, but it wasn’t their primary business model. Plus, this seemingly simple task (popup surveys) cost a monthly fee.

survey
Example pop-up survey

I figured: I can build that for free.

So I did. And in the fall of 2015 I created a small WordPress plugin that built and tracked these surveys. It was free, and it took me just a few days to code and launch.

Now, keep in mind that I haven’t every considered myself a developer. My job title when I left my job was “President”, and I was working for a consumer appliance company.

I mean, sure, I had been building websites and small projects for my entire adult life. I guess I just never identified as being a developer.

As users trickled in, I started getting more excited. I released a few updates that solved some issues, and I started to get some reviews: they were good!

This, paired with a proven market for this type of product, was the validation that I needed to build out the concept, and see if I could build something that business people actually wanted to use.

I wanted to make it better than anything else out there, and to start my own gig.

So I left my current job. It was a tough transition, but it was definitely worth it.

This was 3 months ago.

The result is called MARE (as in MArket REsearch), and you can check it out here.

mare

I’ve expanded on the basic concepts of my original plugin, adding additional survey types, and much better tracking and reporting.

Plus, it now works for any website and not just WordPress blogs.

The best part? It’s still free.

Yes, I will be monetizing the product down the road, but for now I’m excited about getting lots of user feedback (over 300 users so far) and improving the product.

I release a new update pretty much every week, though sometimes it’s just bug fixes, and the user base (and more importantly, usage) is growing steadily.

I believe that 2016 is going to be a very good year for customer data 🙂

I will have more updates on my progress both here on my blog, and on my medium page.

Share on FacebookTweet about this on TwitterShare on Google+

You are a fraud

There. I said it.

Isn’t that what you’ve been waiting to hear?

Isn’t that what the voice in your head has been yelling in your ear every time you hit publish, send or step out on stage?

Well, it’s true. To someone, somewhere, you are a fraud.

Get over it.

Now can we move on to doing what matters?

To doing work for the people who care?

Share on FacebookTweet about this on TwitterShare on Google+

The foundation of everything

Habits are the foundation for everything.

How do you get fit?

A little at a time… Consistently.

How do you learn to play music?

A little at a time… Consistently.

How do you build a profitable venture?

A little at a time… Consistently.

How do you maintain culture and communication within your team?

A little at a time… Consistently.

Each of these requires steady commitment and habits.

Share on FacebookTweet about this on TwitterShare on Google+

Ideas are NOT a zero sum game

Ideas are everywhere, and they don’t belong to you.

If you have a new idea, chances are that someone else has already thought of it.

But just because an idea is not 100% original, doesn’t mean it’s not worth pursuing.

Ideas need execution. They need someone to take them and run with them. They need someone to help them grow.

And there are an infinite number of ways to execute on an idea.

That’s where your unique perspective and creativity come in. And that’s where your idea will thrive or die.

And maybe it will die.

But the point is not to win or lose.

The point is to play the game, and keep playing.

You can make it happen.

Share on FacebookTweet about this on TwitterShare on Google+

What’s most valuable to you?

Think about this for a moment.

What is the most valuable thing you have? Is it a car? A house? A company?

Or is it something else?

To me, the most valuable thing you can have is time.

Time to do more.

Time to experience more.

And it’s the only thing that you can’t earn more of.

You have a finite amount.

Don’t waste it on poor quality people.

Don’t waste it on negative feelings.

Don’t waste it on shitty jobs.

Use it wisely. Use it like it could be gone in a few years… or next year… or next month…

Or tomorrow.

Share on FacebookTweet about this on TwitterShare on Google+

I dare you

I dare you to write like you mean it

I dare you to scare the shit out of yourself

I dare you to send a message

I dare you to be remembered vividly

I dare you to seek out discomfort

I dare you to not just learn something new, but to master it

I dare you to travel… loudly

I dare you to eat weird shit

I dare you to fall in love

I dare you to push away the people who are bad for you…

… and to appreciate the ones who aren’t

I dare you to watch less TV

I dare you to work your face off

I dare you to take a long vacation

I dare you to throw out a bunch of your stuff

I dare you to buy only experiences and no things

I dare you to be free…

… and to see what happens.

Share on FacebookTweet about this on TwitterShare on Google+

Cutting in Line

When someone cuts you off in traffic, it’s offensive.

It’s offensive because they’ve broken the rules in order to get ahead of us. It creates tension because it feels like they’re taking advantage. After all, we are following the rules…

When someone makes a lot of money by taking advantage of the system, it’s frustrating.

It’s frustrating because they’ve broken the rules in order to get ahead of us. They’re taking advantage in ways that we are not willing to.

These types of black and white rules work in a world where all the cars need to go in the same direction without hitting each other. Or when we want to control our economy and prevent shady business practices.

However in the world of connectivity and social networks and hyper speed, the rules of order don’t work anymore.

Those same rules that keep cars on the road and keep people paying their taxes become a burden.

Because if you repeat something online that has already been done before. If you simply follow the “rules.” Then it probably won’t work.

No, this new world asks that you break the rules. That you stretch yourself beyond where you might feel comfortable.

And that, is why it’s exciting.

Share on FacebookTweet about this on TwitterShare on Google+