6 Creative Ideas for CSS Link Hover Effects

default-link-styled-link-hover.jpg

Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you’ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project.

A default link hover effect above a styled link hover effect with a rainbow underline.

Let’s get right to it!

I know we’re talking about :hover and all, but it can sometimes (but maybe not always) be a good idea lump :focus in as well, as not all interactions are directly from a mouse, but perhaps a tap or keystroke.

This effect applies a box shadow to the inline link, altering the color of the link text in the process. We start with padding all around the link, then add a negative margin of the same value to prevent the padding from disrupting the text flow.

We will use box-shadow instead of the background property since it allows us to transition.

a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 #54b3d6;
  color: white;
}

Here’s a fun one where we swap the text of the link with some other text on hover. Hover over the text and the linked text slides out as new text slides in.

Easier to show than tell.

There’s quite a bit of trickery happening in this link hover effect. But the magic sauce is using a data-attribute to define the text that slides in and call it with the content property of the link’s ::after pseudo-element.

First off, the HTML markup:

<p>Hover <a href="#" data-replace="get a link"><span>get a link</span></a></p>

That’s a lot of inline markup, but you’re looking at a paragraph tag that contains a link and a span.

Let’s give link some base styles. We need to give it relative positioning to hold the pseudo-elements — which will be absolutely positioned — in place, make sure it’s displayed as inline-block to get box element styling affordances, and hide any overflow the pseudo-elements might cause.

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

The ::before and ::after pseudo-elements should have some absolute positioning so they stack with the actual link. We’ll make sure they are set to the link’s full width with a zero offset in the left position, setting them up for some sliding action.

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

The ::after pseudo-element gets the content from the link’s data-attribute that’s in the HTML markup:

a::after {
  content: attr(data-replace);
}

Now we can transform: translate3d() the ::after pseudo-element element to the right by 200%. We move it back into position on :hover. While we’re at it, we can give this a zero offset n the top direction. This’ll be important later when we use the ::before pseudo-element like an underline below the text.

a::after {
  content: attr(data-replace);
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
}

a:hover::after,
a:focus::after {
  transform: translate3d(0, 0, 0);
}

We’re also going to transform: scale() the ::before pseudo-element so it’s hidden by default, then scale it back up on :hover. We’ll make it small, like 2px in height, and pin it to the bottom so it looks like an underline on the text that swaps in with ::after.

a::before {
  background-color: #54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

a:hover::before,
a:focus::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

The rest is all preference! We drop in a transition on the transform effects, some colors, and whatnot to get the full effect. Those values are totally up to you.

View full CSS
a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}
a::before {
  background-color: #54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  color: #54b3d6;
}

a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
a:hover::after {
  transform: translate3d(0, 0, 0);
}

a span {
  display: inline-block;
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

a:hover span {
  transform: translate3d(-200%, 0, 0);
}

This is a pretty popular effect I’ve seen used in quite a few places. The idea is that you use the link’s ::before pseudo-element as a thick underline that sits slightly behind the actual text of the link. Then, on hover, the pseudo-element expands to cover the whole thing.

OK, some base styles for the link. We want no text-decoration since ::before will act like one, then some relative positioning to hold ::before in place when we give that absolute positioning.

a {
  text-decoration: none;
  position: relative;
}

Now let’s set up ::before by making it something like 8px tall so it looks like a thick underline. We’ll also give it absolute positioning so we have control to make it the full width of the actual link while offsetting it so it’s at the left and is just a smidge off the bottom so it looks like it’s subtly highlighting the link. May as well give it z-index: -1 so we’re assured it sits behind the link.

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
}

Nice, nice. Let’s make it appear as though ::before is growing when the link is hovered. All we need is to change the height from 3px to 100%. Notice that I’m also dropping the bottom offset back to zero so the background covers more space when it grows.

a:hover::before {
  bottom: 0;
  height: 100%;
}

Now for slight transition on those changes:

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}
View full CSS
a {
  text-decoration: none;
  color: #18272F;
  font-weight: 700;
  position: relative;
}

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

a:hover::before {
  bottom: 0;
  height: 100%;
}

I personally like using this effect for links in a navigation. The link starts in one color without an underline. Then, on hover, a new color slides in from the right while an underline slides in from the left.

Neat, right? There’s a lot of motion happening in there, so you might consider the accessibility implications and wrap it all in a prefers-reduced-motion query to replace it with something more subtle for those with motion sensitivities.

Here’s how it works. We give the link a linear background gradient with a hard stop between two colors at the halfway mark.

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
}

We make the background double the link’s width, or 200%, and position it all the way over to the left. That way, it’s like only one of the gradients two colors is showing.

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

The magic happens when we reach for a couple of non-standard -webkit-prefixed properties. One strips the color out of the text to make it transparent. The other clips the background gradient to the text so it appears the text is actually the color of the background.

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Still with me? Now let’s make the link’s faux underline by putting ::before to use. We’ll give it the same color we gave the on the hidden portion of the link’s background gradient and position it under the actual link so it looks like a proper text-decoration: underline.

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

On hover, we slide ::before into place, coming in from the left:

a:hover {
 background-position: 0;
}

Now, this is a little tricky. On hover, we make the link’s ::before pseudo-element 100% of the link’s width. If we were to apply this directly to the link’s hover, we’d make the link itself full-width, which moves it around the screen. Yikes!

a:hover::before {
  width: 100%;
}

Add a little transition to smooth things out:

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}
View full CSS
a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

a:hover {
 background-position: 0;
}

a:hover::before {
  width:100%;
}

We can’t do text-decoration-color: rainbow, but we can fake it with a little background magic mixed with linear gradients.

First, we remove the link’s text-decoration:

a {
  text-decoration: none;
}

Now for those gradients. We chain two linear gradients together on the same background property. One gradient is the initial color before hover. The second is the rainbow on hover.

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
}

Let’s make the background size a mere 3px tall so it looks like, you know, an underline. We can size both gradients together on the background-size property so that the initial gradient is full width and 3px tall, and the rainbow is zero width.

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
}

Now we can position the background gradients — at the same time on the background-position property — so that the first gradient is fully in view and the rainbow is pushed out of view. Oh, and let’s make sure the background isn’t repeating while we’re at it.

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

Let’s update the background-size on hover so that the gradients swap values:

a:hover {
  background-size: 0 3px, 100% 3px;
}

And, finally, a little transition when the hover takes place:

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

Voilà!

Geoff Graham actually covered this same one recently when he dissected Adam Argyle’s slick hover effect. In his demo, a background color enters from the left behind the link, then exits to the right on mouse out.

My version pares down the background so it’s more of an underline.

a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

That’s not the only way to accomplish this! Here’s another one by Justin Wong using background instead:

Geoff also has a roundup of CSS link hover effects, ranging from neat to downright absurd. Worth checking out!

Have a blast linking!

There are a lot of options when it comes to creating your own hover effect for in-line links with CSS. You can even play with these effects and create something new. I hope you liked the article. Keep experimenting!


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Hiring During A Recession: ✋ 5 Things You Need To Do Differently

2022 is a tough year for the job market.
The COVID-19 pandemic has caused widespread economic disruption, with millions of Americans losing their jobs. And even now, as we’re clawing our way out of a pandemic economy, a period of major economic downturn looks inevitable. 
We learned a lot from the Great Recession of 2008, and while the situation is different this time around, the main lesson is still the same. 
During tough economic times, your hiring process needs to change.
But… are we actually in a recession?
Economists are divided on whether we’re currently experiencing a recession or not. The National Bureau of Economic Research (NBER), the body that usually declares it, is yet to give the official word.
It’s true that back-to-back negative GDP quarters and rising interest rates usually indicate a recession, but the story is more complicated than that.
Recessions in the U.S usually sees:

A sharp decrease in GDP (which we are seeing)
A sharp increase in unemployment (which we’re not)

These two factors usually feed into each other. A decrease in economic output means companies have to cut costs, resulting in layoffs and hiring freezes. People stop spending as much, leading to a decrease in business profit. And on it goes.

But in 2022, the unemployment rate has actually dropped. To 3.5% in July 2022, in fact – the lowest since February 2020.
This is consistent with what we’re hearing on the ground. Everyone we know seems to be hiring and struggling to fill positions. Yet, data shows that there are currently over 11 million unfilled jobs in the U.S.
The economic downturn may be caused by a lack of confidence in spending due to high inflation. This puts a strain on businesses, yes. But in a post-pandemic economy where workers are hard to come by, many business owners may be reluctant to cut costs by laying off workers.
That’s why economists speculate that if we do go into a recession in 2022, it won’t be like any recession that they’ve seen before.
What does this mean for those who are hiring?
This is a unique time for hirers.
We’ve seen the trend of the Great Resignation movement and very high job openings over the past two years.

Source: Bureau of Labor Statistics
Companies are still desperate to make hires, even as the economy is contracting. But this state is unsustainable.
Best case scenario: the economy improves, and output increases. But at some point, the economy may also contract to a point where businesses can no longer afford to make new hires. So they will either put hiring on hold or begin making cuts.
This is why it’s so important for hirers to focus on preparing and making the right hires now.
The market is candidate-driven right now, but that may change very quickly. As a result, recruiters and hiring managers must rethink their strategies and prioritize data-driven hires to help their businesses weather any economic storm.
5 Things You Need to Do Differently
Every recession comes with different challenges. But when hiring during a recession, there are key changes you can make to your hiring practices to ensure that the wheels keep moving, no matter what the world throws at you.
Tip 1: Streamline the Screening Process
The screening process is a lot. 
And this is especially relevant for those hiring in the tech industry.

The key is to make it easy for yourself.
If you can do it in one step, why take two?
Zone in on the key skills that you’re looking for in a candidate and choose the most efficient way to test them. That might mean adding a screening question to the application or one technical test instead of two.
The reality is that most applicants won’t make it to the interview stage, and you need to get to the most suitable candidates as quickly as possible.
The key is ensuring that each stage of the process is designed to assess a specific skill set or quality. This will help you weed out candidates who are not a good fit early on, saving you time and effort in the long run.
We go into a lot more details here on how you can speed up that screening process.
Tip 2: Move Quickly
Time is of the essence, and even more so when you’re hiring during a recession.
Hiring is a costly process, so make sure that you’re not burning money trying to get the perfect candidate. By the time you finish prospecting, they might already be snapped up by another company. Fast and attentive responses also tend to make a better impression on quality candidates.
If you’re scouting for some talent, you can reduce your time-to-hire and increase the chances of getting a response by using tools like Contact Out to get contacts on LinkedIn in seconds.
[embedded content]
It’s also not just about the efficiency of the tool but the accuracy. You can read some of our case studies to see how recruiters like yourself have streamlined their contact hunting process.

(Our email search database is pretty good too, just saying. Give it a shot.)
Tip 3: Focus on Fit
Talent acquisition during a recession is all about strategy.
Make sure you’re making decisions on your hiring plan and candidate selection that is based on the latest recruitment data. Predicting a realistic time-to-hire and anticipating likely issues will allow you to work more efficiently and save your company more money.
(This State of Tech Recruitment industry report is a good place to start if you’re in the tech industry.)
Make sure you’re clear about the role and level of expertise needed in the job descriptions, and focus on the most qualified candidates. It’s important at this time that you make decisions informed by the workplace atmosphere, the team, and the likelihood that the candidate will integrate well into the workplace.
Be aware also that a recession usually sees the older people in the workforce retire, which means that you need to fill spaces in those roles. Try to build succession lines early for a smoother transition and match the qualifications of the candidates to the holes the older employees will leave behind.
Tip 4: Build Your Network
It’s especially important to cultivate your circle of contacts before and during recession years.
Building personal relationships with top talent will make them more likely to hear you out when you’re headhunting. Knowing a candidate more personally will also speed up the screening process.
You can also cast your net wider to reach candidates beyond your immediate area and offer remote work as an option if the role you’re trying to fill allows that. Non-traditional talents and candidates on different continents may be the perfect fit for your business, and you won’t know until you send out feelers in their direction.
Having a wide network also lets you fish for candidates in the talent pool more effectively, and you’ll likely be able to find a guy who “knows a guy” that can get you in direct contact with them. This will help cut down that exhausting process of chasing down emails and phone numbers.
Tip 5: Listen
It’s a difficult time for everyone. Employers want to make sure they and the people that rely on them survive through the lean years. Unsurprisingly, this takes a mental toll on business owners and hiring managers.
Job seekers may also be desperate to land a job – any job, and headhunting candidates may be scared to leave secure positions in their current jobs for a new position.
You hold a lot of power in your role, and the most important thing to do in this situation is to listen.
What do employers need? What do candidates prioritize?
In a long period of insecurity, you might see people with talent turn down dream jobs for one that offers better wages and benefits. But the story is different for every field, and some candidates will turn down better pay and benefits for more job security.
On the flip side – our studies reveal that if you’re a recruiter in the tech industry, you’re more likely to get candidate rejections.

So make sure you respond with empathy during each step of the process, and take it easy on yourself if you’re having a hard time filling roles (especially for the tech recruiters reading this!) 
A recession is a hard time to get through for everyone, but we won’t get through it by being callous about people’s needs.
A little kindness is free and goes a long way in tough times 💖
Recruiting is hard enough…
And recessions make everything harder. But as with everything, being prepared and bracing for the worst will help you weather the storm.
But remember! In times of crisis, put on your own oxygen mask before helping other passengers with theirs.
Your role takes a mental toll, and being in the trenches recruiting during a recession means that you see the front lines of it more than other people. Take care to plan with your mental health in mind. Any strategy that compromises your mental state is unsustainable.
Lean on the resources available to you, and let’s get through this together!

Source
Ready to speed up your recruiting process? Get started with Contact Out for free today.

Read More »
How to nail candidate fit for every tech role 🎯

Source
Achieving candidate fit in tech roles is harder than ever – which is the main reason tech role hire time has increased from 29 to 43 days.
Tech recruiters now spend 20 hours per hire on candidate screening calls alone.
(That’s 50% longer than their counterparts from other industries!)
Recruiters from some companies (Canva, Microsoft, Netflix, and Shopify) now spend more than 10 hours of their week just screening candidates on the phone.
That’s a lot of calls — and a lot of time — spent talking to candidates. Most who won’t meet the hiring manager’s criteria (or who won’t find the job offer appealing.)
But why — and what to do about it?
In this article, we’ll answer both of these questions.
Why finding a fitting candidate is hard from the tech recruiter side
Getting the right candidate fit is the most important thing to get right in any company.
Hiring the right person means lower worker turnover, higher engagement, increased productivity, and greater consistency for operations. 
A hiring manager can have the wrong vision, the wrong skills, and be poor operationally but still succeed if they have great people reporting to them.
In tech, “good on paper” does not mean candidate fit
When searching for the perfect candidate, tech recruiters receive a set of criteria from the hiring manager that are based on what they consider to be quality.
Hiring managers might overemphasize candidate filters that worked in the past (or filters that find them candidates like themselves.) 
They may ask for only candidates who graduated from a top 20 university, who have certain certifications, have specific degrees, or self-proclaimed skills.
Tech recruiters will then diligently run through a process of candidate list building, outreach, and screening, to send hiring managers the candidates they will like.

Source
The reality is, skills and backgrounds — the very thing tech recruiters are filtering for during this process — are poor indicators of tech team success.
Harvard business scholar Frans Johansson talks about this in his groundbreaking study The Medici Effect. High-performing teams (like all teams) thrive when they contain all kinds of geographic, academic, ethnic, and experiential backgrounds.
And tech is no exception. 
Top teams of engineers and developers include everything from PhDs, to dropouts, to candidates who learned their skills mid-career.
Instead of just filtering for the “good on paper” attributes a hiring manager asks for, tech recruiters should identify candidates who:

Have the competency to perform the tasks the company needs
Have the intrinsic motivation to do the work

Measuring competency with take home challenges
Regardless of the candidate’s background, the only way to assess their competency is with a take home challenge.
Live brain teasers (Google famously asking candidates how many golf balls would fit in a Boeing 747) and live coding challenges do assess how tech workers work under pressure. 
But these are neither the work the candidate will do, nor the way they’ll do it.
No engineer works with their manager standing over them watching their performance. And they won’t be working out the relative volume of sports equipment and jet airplanes.
They will, however, be working on the company’s codebase — and on company projects. 
A take home challenge can assess this.
For example, ask the candidate how they would design software architecture for a project similar to one that has recently been completed.

Source
It’s much easier for a head of engineering to assess a candidate’s competency if the problem relates to something that head has recently solved.
A challenge (typically taking 30 minutes to 4 hours to complete) will also help gauge the motivation of the candidate.
Typically, about 70% of candidates will complete a challenge when offered one.
If your rates are lower, either the challenge is too hard (or too confusing), or the candidate loses interest in the role before they will themselves through the task.
Lack of interest usually means the tech recruiter isn’t tapping into the candidate’s intrinsic motivation enough.
Measuring tech candidate intrinsic motivation
No matter a tech worker’s competency, they will only be productive if they have the intrinsic motivation to keep working — despite the inevitable frustration that comes with challenging work.
As world-renowned productivity expert Charles Duhigg writes in his book Smarter, Better, Faster, extrinsic motivation (primarily compensation, status, and fringe benefits like remote work and flex time) are short-term and don’t last. 
Our own recent study confirms Duhigg’s assessment, as tech recruiters reported that candidates care even less about extrinsic motivators than workers from other industries.
The factor tech workers care most about — impact — means “the opportunity to grow the company and make their mark.” 
This is at the top of the list for intrinsic motivators, a list which also includes:

Challenge (goals just daunting enough to deliver a sense of accomplishment)
Personal growth (not professional, job title-related)
Team (and the energy they can provide the candidate)

Source
Tech recruiters deliver candidates with higher productivity, longevity, and quality when they spend their screening call time assessing these four intrinsic motivators for a candidate.
Some good questions to ask to assess these motivators include:

How much do you know about what our company does and why we’re doing it?
How would two years at this job get you two years closer to your personal and professional goals?
What challenges in your professional history have kept you most engaged and why?
Talk about the types of team collaboration you have thrived with in the past.

Level up your tech recruitment
As introduced above, achieving perfect candidate fit in tech roles comes down to talking about what they value. 
Our free report on the state of tech recruitment identifies 10 key takeaways to take the anxiety out of the hardest industry to recruit for.

Read More »
Tech recruiters get rejected by candidates most often — Here’s how to get more positive responses ✨

Tech recruiters have the toughest job in recruitment — by far.
Tech workers are so highly sought after, it’s hard just to get a response. Tech recruiters spend 1.9 hours longer each week doing outreach than recruiters from other industries.
But even when they get a response, tech recruiters face rejection much more often.
In our recent survey, tech recruiters told us that 43% of candidate responses were negative, vs. just 27% for other recruiters.
The top negative responses being:

“I’m not interested in this job”
“I’m not interested in any job”
“I don’t want to be contacted by you under any circumstances”

That means when tech recruiters get an email — ping! — every other response is likely to be a candidate complaining in some way about the job offer.

Source
Tech workers are interested – in the right email!
Despite the difficulty in finding a candidate who matches a job requisition, 80% of tech workers surveyed said they would change jobs this year, and 73% talk to a recruiter each month.
So then, the keys to increasing the rate of positive candidate response in tech recruitment?
Here are the 4 most important ones.

Talk to them about impact.
We mentioned previously that candidates are only interested in one aspect of a job – impact. Or specifically, “the opportunity to grow the company and make their mark.”
Getting clear on that, and focusing on it in the initial email, will start the conversation in the right direction.
For example, instead of simply talking about the salary and job title, mentioning that the candidate could…

“help 10,000,000 introverts exercise without gym anxiety” 

“save coders across the world millions of hours of time” 

…with their work will help them frame why the job matters.
After all, when they change jobs, they have to tell their friends and loved ones. Make it easy for them to put an aspirational reason behind their decision.

Turn rejection into referral.
I use a method recommended by TripleByte co-founder and Y Combinator partner Harj Taggar (which I’ve dubbed “rejection referrals”) to hire many of the 60 new staff brought into ContactOut this year.
Whenever I get a negative response from a tech candidate, I ask them if they can refer someone else.Just doing this one thing increased our positive response rate for product managers in the sparse Singaporean job market by 30%.

Mention the compensation range in the email.
Although compensation alone isn’t usually enough to entice the best tech workers, 79% prefer to see a compensation range in the email. Truth is, “competitive pay and benefits” just won’t cut it in 2023.
Candidates will respond more positively if you include pay transparency in the initial outreach email.
And increasingly, laws are requiring it. With new pay transparency laws cropping up in Colorado, New York City, and Washington state, now is a good time to get ahead of this recruitment trend.
It’s good for you, too. As I mentioned in another blog post, this also saves you and the candidate time. Why spend 30 minutes in a screening call with a candidate only to learn that you can’t afford them?

Save the non-job-related personalization for the P.S.
Personalization in recruitment outreach emails is powerful – but can come across as awkward and insincere if you quickly move from:“Hey Peter, I see we’re both mountain climbers!”
to
“Now, let’s talk about this role that’s open…”
A better way? Open the email with the reason they stood out as a candidate for the job.

“I see you were a top performer at…”
“I see you helped Company XYZ scale from…”
“Person XYZ recommended I reach out to you…”

And save the non-job-related personalization for the p.s. at the bottom of the email.
When you read an email, your eye always goes to the p.s. — so people won’t miss it.

I get about 25% more positive responses with the personalized p.s. than without it.
It turns any cold email warmer. I can mention that you and I both went to the same university, both volunteer for the same cause, or even just to mention how impressed I am about your startup, patent, or cool project.

Level up your tech recruitment
The full study has many more insights that will help tech recruiters perform better in 2022 — get into “the 30% club” and accelerate your own career. Here’s how:

Read More »