The MarTech Conference is for forward-thinking, senior-level marketers who are convinced that modern marketing is agile, customer-centric, decentralized, process-driven, people-powered… and technology-enabled.
If your organization is moving from one in which marketing is assisted by martech to one where martech is absorbed in marketing, and if you agree that martech is marketing — this conference is for you.
Join us April 15-17 in San Jose to push the limits of marketing execution, process, and people. The all-new agenda is live and ready for you to explore! You’ll unlock creative, vendor-agnostic solutions and actionable tactics for overcoming everyday marketing challenges, like…
Structuring marketing teams and stacks to ensure organizational success
Benchmarking multi-channel stacks to thrive in 2020 and beyond
Modernizing social media martech to unlock innovation opportunities
Fostering unified enterprise workflow to enable more efficient marketing
Leveraging APIs to help meet customer expectations
…and dozens more. Each editorial track — Marketing Operations, Marketing Data, Marketing Technology, and Marketing Orchestration — tackles a pillar of your profession; each session delivers practical advice and insights you can implement immediately.
Keynotes from digital analyst Brian Solis, SalesForce Principal of Marketing Insights, Mathew Sweezey, and communications expert Nancy Duarte will inspire, inform, and empower. You’ll learn how to leverage AI to improve customer experiences, motivate buyers in an age of infinite media, and use data to tell compelling, humanizing narratives.
Don’t miss this opportunity to learn first-hand from some of the world’s most successful brands, including Wells Fargo, Lyft, DocuSign, Salesforce, CaringBridge, GrubHub, Vonage, Gartner, Twitter, and many more.
All Access Workshop Combo (best value!): Dive deeper and learn more with a half-day, pre-conference workshop. These expert-led workshops deliver a unique opportunity to train in an immersive, intimate environment.Book todayand enjoy $900 off on-site rates! (Workshop-only passes are also available.)
Expo : Searching for marketing technology? Focused on growing your network?Pick up a free Expo passto enjoy unlimited Expo Hall access, full-length Solution Track sessions, sponsor presentations in the Discover MarTech Theater, downloadable speaker presentations, refreshments, WiFi, and more.
Team Rates: MarTech is a fabulous option for your 2020 company outing. Attend as a group for a unique team-building experience and lock in extra savings while you’re at it!
Alpha rates expire February 15… book now to enjoy these fantastic savings. Once they’re gone, they’re gone.
Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.
About The Author
Scott Brinker is the conference chair of the MarTech® Conference, a vendor-agnostic marketing technology conference and trade show series produced by MarTech Today’s parent company, Third Door Media. The MarTech event grew out of Brinker’s blog, chiefmartec.com, which has chronicled the rise of marketing technology and its changing marketing strategy, management and culture since 2008. In addition to his work on MarTech, Scott serves as the VP platform ecosystem at HubSpot. Previously, he was the co-founder and CTO of ion interactive.
In today’s tutorial, we’re going to create 7 different CSS hover effects. We’ll learn loads along the way, including how to animate font icons, borders, and SVG paths. You’ll be able to apply these CSS hover effects to all kinds of situations. Let’s dive in!
Just to give you an idea of what you’ll learn during this tutorial, check out one of the demos we’ll be building:
Let’s start with this one, see you in the first step..
1. Revealing Icon CSS Hover Effect
In this first example, we’ll explore the demo you’ve already seen: a hover effect where text is replaced by an icon with a slide animation.
Start with the Page Markup
We’ll start with a plain unordered list which will represent a typical page menu. Each menu link will include two span elements. The first span will contain the anchor text, while the second one will hold a Font Awesome icon:
The list will be a flex container with horizontally centered content:
.menu {
display: flex;
justify-content: center;
}
Note: This basis style will be added to all the demos we build, so we won’t discuss it again. The demo also has some aesthetic styles we’ll reuse every time (such as the dark background etc.) which you can copy from the CodePen demo.
The first span in each item will have some padding around it:
.menu a span:first-child {
display: inline-block;
padding: 10px;
}
Then the second span will be absolutely positioned and hidden by default. Plus, its icon will be horizontally and vertically centered:
Happily enough, there’s the option to modify the direction of the slide animations according to our needs. By default during the hover animation, the icon will appear from top to bottom, while the text will be moved to the bottom. To change that behavior, we have to pass the data-animation attribute to the target list. Possible values are to-top, to-right, and to-left.
Here’s the full CodePen demo that summarizes the aforementioned cases:
2. Revealing Swipe CSS Hover Effect
In this second example we’ll continue with another hover effect where text is replaced by a Font Awesome icon. But, this time, the replacement will happen in the background and won’t be visible to us, thanks to a “swipe” which happens in the foreground:
Specify the Page Markup
As ever, we’ll start with an unordered list which will contain the page links. In this case though, each of our links will have a data-icon attribute. The value of this attribute will match the Unicode respresentation of a Font Awesome icon:
We’ll then define the ::before and ::after pseudo-elements of all links.
The ::before pseudo-element will be positioned in the center of the link, though it will initially be invisible.
The ::after pseudo-element will cover the full link dimensions, but it will also be hidden by default. Its content will hold a Font Awesome icon stored in the relevant data-icon attribute:
Each time we hover over a link, first the ::before pseudo-element will quickly appear. Then, it will be moved to the right and the icon will appear. During that time, the anchor text color will set to transparent.
To achieve this precise timing synchronization, we have to customize the transitions speed. For instance, we’ll add delays to the links as well as their ::after pseudo-element:
We’ll then define the ::before pseudo-element for all the links. We’ll place it to the bottom of its container and give it translate: scaleX(0), so it will initially be hidden.
In addition, we’ll apply transform-origin: left to it because we want the animation to start from left to right:
Each time we hover over a link, its pseudo-element will appear:
.menu a:hover::before {
transform: scaleX(1);
}
Similarly to the previous example, we have the option to change the direction of the slide animation. The line will appear from left to right by default, but to change that behavior, we have to pass the data-animation attribute to the target list. Possible values are to-left and center.
We can go things one step further and change the transform-origin property value of the pseudo-element depending on its state. This makes the underline appear from one side, and disappear from the other:
Here are the rules that implement this functionality:
Here’s the CodePen demo for the scenarios we discussed:
4. Multiline Animation CSS Hover Effect
Moving on, in this fourth example we’ll cover a hover effect where multiple lines will be revealed sequentially. The beauty of this technique is that it will give us the impression that the border of the hovered element is being painted. How cool is that!
Note: this effect can also be achieved with SVG, and we’ll look at something similar in a later demo.
Specify the Page Markup
Again, our markup will consist of an unordered list. Each of the menu links will contain four empty span elements:
As we hover over a link, its spans will become visible sequentially, following a clockwise rotation. To do so, we’ll control when the second, third, and fourth spans become visible:
Take a look at the CodePen demo that gives us those effects:
5. Animated Circle SVG Hover Effect
In this fifth example, we’ll walk through a hover effect where an SVG path is animated, encircling our link. The technique we’re going to use isn’t something new; in actual fact, Jake Archibald wrote about it some years ago.
Specify the Page Markup
Once more, we’ll start with an unordered list, but this time we’ll include an SVG nested inside each link:
The SVG will be an ellipse and is represented via the path element. We’ll give it preserveAspectRatio="none" because, as we’ll see in a moment, it should cover the full parent dimensions, even if it’s stretched.
Specify the Styles
The SVG will be absolutely positioned and centered within its container. Plus, as mentioned above, it will be big enough to cover the anchor text:
To animate the path, we’ll need two additional properties. Specifically, the stroke-dasharray and stroke-dashoffset properties.
The stroke-dasharray property is responsible for creating dashes/gaps in our stroke. For example, by setting stroke-dasharray: 50 to the path, it will look as follows:
The stroke-dashoffset property is responsible for changing the position (offsetting) of those dashes.
So here’s the trick:
First, the value of the stroke-dasharray property should match the length of the path. Instead of guessing it, JavaScript provides a handy way for grabbing it through the getTotalLength() method.
Next, we’ll also assign the resulting value (or its negative one for a reversed effect) to the stroke-dashoffset property. This neat combination will hide the SVG.
Then, each time we hover over a link, we’ll run an animation which will move the stroke-dashoffset property value to 0. As a result of that, the path will be gradually “drawn”.
With all the above in mind, let’s first retrieve the path’s length (just for the first path) via JavaScript:
document.querySelector("li:nth-child(1) path").getTotalLength();
//1210.709716796875;
// you might see slightly different values depending on your browser
Then, we’ll assign this value to the corresponding properties:
Lastly, as an improvement, instead of hard coding the stroke-dasharray and stroke-dashoffset values, we could have specified them dynamically through JavaScript (see if you can do that bit yourself!).
Here’s the final demo, which gives us a cool chalkboard hover effect:
6. SVG Wavy UnderLine Hover Effect
Now that we know the basic principles behind the SVG path animation, let’s have a quick look at two other very similar examples. In both examples, there won’t be any need to stretch the SVGs, so we won’t make use of the preserveAspectRatio="none" attribute.
The first one will reveal a wavy underline.
Here’s the demo:
7. Pointing SVG Arrow Hover Effect
The third SVG demo will reveal an Iconmonstr icon (a pointing arrow).
Here’s the demo for you to reverse engineer:
Conclusion
That concludes another tutorial, folks! It was quite a long journey, but I hope that you enjoyed it and have learned some new things which you will include in your front-end toolkit.
Last but not least, I have added all the demos of this tutorial to a CodePen collection. Be sure to check it out and give it some love!
I’d love to see your favorite CSS hover effects. They can come from CodePen, an inspirational website, or somewhere else. Don’t forget to share them with us in the comments section.
As always, thanks a lot for reading!
More CSS and JS Hover Effect Tutorials
Learn how to create even more interesting CSS hover effects with these Tuts tutorials:
JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:
alert("Hello, World!");
The UI for this varies from browser to browser, but generally you’ll see a little window pop up front and center in a very show-stopping way that contains the message you just passed. Here’s Firefox and Chrome:
Native popups in Firefox (left) and Chrome (right). Note the additional UI preventing additional dialogs in Firefox from triggering it more than once. You can also see how Chrome is pinned to the top of the window.
There is one big problem you should know about up front
JavaScript popups are blocking.
The entire page essentially stops when a popup is open. You can’t interact with anything on the page while one is open — that’s kind of the point of a “modal” but it’s still a UX consideration you should be keenly aware of. And crucially, no other main-thread JavaScript is running while the popup is open, which could (and probably is) unnecessarily preventing your site from doing things it needs to do.
Nine times out of ten, you’d be better off architecting things so that you don’t have to use such heavy-handed stop-everything behavior. Native JavaScript alerts are also implemented by browsers in such a way that you have zero design control. You can’t control *where* they appear on the page or what they look like when they get there. Unless you absolutely need the complete blocking nature of them, it’s almost always better to use a custom user interface that you can design to tailor the experience for the user.
With that out of the way, let’s look at each one of the native popups.
What it’s for: Displaying a simple message or debugging the value of a variable.
How it works: This function takes a string and presents it to the user in a popup with a button with an “OK” label. You can only change the message and not any other aspect, like what the button says.
The Alternative: Like the other alerts, if you have to present a message to the user, it’s probably better to do it in a way that’s tailor-made for what you’re trying to do.
If you’re trying to debug the value of a variable, consider console.log("`Value of variable:"`, variable); and looking in the console.
window.confirm();
window.confirm("Are you sure?");
let answer = window.confirm("Do you like cats?");
if (answer) {
// User clicked OK
} else {
// User clicked Cancel
}
What it’s for: “Are you sure?”-style messages to see if the user really wants to complete the action they’ve initiated.
How it works: You can provide a custom message and popup will give you the option of “OK” or “Cancel,” a value you can then use to see what was returned.
The Alternative: This is a very intrusive way to prompt the user. As Aza Raskin puts it:
...maybe you don’t want to use a warning at all.”
There are any number of ways to ask a user to confirm something. Probably a clear UI with a wired up to do what you need it to do.
window.prompt();
window.prompt("What’s your name?");
let answer = window.prompt("What is your favorite color?");
// answer is what the user typed in, if anything
What it’s for: Prompting the user for an input. You provide a string (probably formatted like a question) and the user sees a popup with that string, an input they can type into, and “OK” and “Cancel” buttons.
How it works: If the user clicks OK, you’ll get what they entered into the input. If they enter nothing and click OK, you’ll get an empty string. If they choose Cancel, the return value will be null.
The Alternative: Like all of the other native JavaScript alerts, this doesn’t allow you to style or position the alert box. It’s probably better to use a
UX research helps in the development of analytical techniques used to know the user experience regarding the product. The research should be conducted in such a way keeping in mind who the user is, in what context they use a product and what they need from a product or service. The business owners need to be clear of their resources and constraints before beginning a UX research. Once they are clear, they can start the research.
Duration of research
The duration of research and what a particular business wants to achieve decides either to choose Longitudinal Research or Cross-sectional research.
Longitudinal Research
Longitudinal research mainly focuses on repeated observation of a group of users over time, at regular intervals. This research is done in order to observe user perceptions, attitudes, and behaviours. The main advantage of longitudinal research is that it extends beyond a single time frame. Because of this, the events can occur in a proper sequence. The longitudinal study can be done in many ways like diaries, participant observation, and repeated interviews/ surveys.
Cross-Sectional Research
Cross-Sectional Research is a study where the feedback is collected from a group of people at a single point of time. Here the users are categorized into different groups named cohorts. It mainly involves assessing customers with one key factor, at a specified time. For this, the business owners invite users and categorize them into two or more groups and take their feedback.
Nature of data
Here, business owners should decide if they require statistical or opinions and other subjective data. Based on this, the quantitative and qualitative research can be done.
Quantitative Research
Quantitative research includes anything that you can count: time on page, time to complete a task, user flow, page view. The quantitative study in UX is more often used in market research as it involves large data sets. Here, the research will be done keeping in mind the customer preferences.
Qualitative Research
Qualitative research in UX involves mainly the behaviours, feelings, and attitudes of users. Qualitative research is done in order to understand the factors that influence the customer’s decision to buy a product, experience in using that product and the impact it creates by taking the customer’s feedback.
Source of data
The data can be collected in two ways: through Primary and Secondaryresearch.
Primary research
Primary research is done through interviews, experiments or conducting questionnaires to acquire data. The fresh data is collected rather than the data from the published sources. Primary research is both time and resource-consuming as it requires direct interaction with the customers.
Secondary Research
Secondary research focuses on analyzing already existing sources like research papers, journals, articles. For those who are having less time and limited resources, Secondary research will be an added advantage as it takes relatively less time.
The objective of the Research
The objective of the research is to investigate the problem and trying to fix the problem in the most efficient way. This can be done through Exploratoryresearch, Descriptiveresearch and Evaluativeresearch.
Generative or Exploratory research
Exploratory research is done in order to investigate the problem at the preliminary stage. This research thus involves conducting interviews, group discussions with the customers as per the requirement and identify the problem regarding the product.
Descriptive and Informative research
In descriptive research, the problem statement is already given and is used to gain a detailed understanding of the problem. This research helps in providing the complete solution to the problem after a detailed analysis of the problem.
Evaluative Research
Evaluative research is done by approaching the users and try to find out whether the solution which you got in the Descriptive research works out or not. The main aim of this research is to see if the problem got completelyfixed or not.
The outcome of the Research
Pure Research
Pure research is basic research in order to identify the relationship between variables. Pure research is done completely out of curiosity and interest and is more exploratory in nature.
Applied Research
Applied research is based on basic or pure research. This is done in order to solve the problem identified in the pure research phase. The outcome of this research is mainly used for the presentuse, not for the future.
It is also essential to choose the correct research approach for a product at the correct time. The Nextbrain Studio uses these kinds of approaches for UX researches for better customer satisfaction.
Our latest news
Hear the unheard news about us, the latest press release and case studies and stay updated .
Some time ago I came across this article on Harvard Business School’s Working Knowledge blog about when founding CEOs need to go. It’s from 2005, but it is still just as relevant now. The main takeaway is that you need differently skilled people at the helm in different stages of your company and that this transition is not always easy. They talk about founding CEOs, but this is also true for CTOs, whether they are founders or not.
Success or failure, you may need a different profile
In the HBS article, they discuss two situations in which a CEO needs replacement, specifically in an early stage of a smaller company. The obvious scenario is when the founder-CEO is not performing well and the targets aren’t met. But paradoxically, it may also be necessary to replace the founder-CEO if the company is doing exceptionally well. In that case, the CEO has been very successful in the stage the company used to be in, but with such dramatic growth, quick change is needed and that requires a different type of CEO.
… the fact remains that the challenges a CTO faces change enormously throughout the life of a company.
This same reasoning can also be applied to CTOs in a digital product company. Whenever bugs pile up, the development team is in chaos or features are constantly almost ready, the CTO is probably not performing well. That is an obvious scenario, but what does the other scenario look like, one where the company is hugely successful?
At first, you need someone who can get something built quickly. That first product should prove the concept, scale a bit to cater the first clients, largely ignoring concerns like stability, security, and scaling. Now imagine your product works: you get traction in the market, people notice you and clients arrive even faster than imagined. Your original CTO has been very successful, but at this point you need someone who can get your product stable, working at scale, and with the security needed in this day and age of ever more refined hacking methods. And you need this person fast. If that same person still ticks all the boxes, you are very lucky.
This example is, of course, a bit extreme, but the fact remains that the challenges a CTO faces change enormously throughout the life of a company. So which skills do you need at each point? And do you even need a full-time, in-house CTO?
From an idea to first growth
At the start, you need a developer, a hacker, someone who knows how to make something that proves your concept and who is skilled enough to make it work for the small user base you will hopefully build up soon. And preferably all of this on a small budget and quickly. This is not a CTO, this is a full-stack developer. They must have a broad skill set, but managing people or a department’s budget, or setting out a technical vision is not needed yet.
At the start, you need a developer, a hacker, someone who knows how to make something that proves your concept and who is skilled enough to make it work
If you’re very lucky, this person is you or your co-founder, but realistically you will have a hard time finding someone who is a good hacker and is willing to work for free, which we all know is what co-founding comes down to. Finding someone that is all this and is ready for the next stage, if and when it comes, is several orders of magnitude harder again. So whatever your situation, calling your most talented developer a CTO may very well backfire as soon as your company grows.
All that is not to say that there’s no need for strategic thinking. How do you solve this? A good option is to start off with advisors to fill this gap. You could hire an external CTO or find an investor with the right experience, but ideally, you find advisors that have had their own successful start-up that has grown beyond where you’re at now.
Exponential growth
Fast forward some time. You’ve built your MVP. Congratulations, this is not a small task. You’ve added features to your product and people to your team to keep things going. Suddenly there’s success; people are talking about your product and even signing up. You need to scale the product, the infrastructure and the team, all at the same time as dealing with the non-technical challenges this brings.
Now your company needs its first full-time CTO. You need someone with a vision on how to do things and the skills to make it happen. A CTO at this point still needs to mainly look inward and know how to code, know the structure of the application and infrastructure, but the focus is shifting towards managing a team, establishing a culture and processes to be able to grow quickly. Growing also means hiring but also making sure that every hire is an effective team member as soon as possible.
A CTO at this point still needs to mainly look inward and know how to code, … but the focus is shifting towards managing a team
With growth come scaling issues. This means your code, however young it may be, will become legacy code, unfit for its current task. A CTO at this point should know how to manage this and know what relevant technology can be used to improve the code base. Managing changes in so many areas is not an easy thing to do.
At this point, you will typically be looking for an extra round of capital. Potential investors will be looking at the team. Your CTO is one of the key people they will evaluate when deciding to invest or not.
What are your options? If you have a CTO already, get advisors, mentors or training. You could even temporarily hire an external CTO ad interim to oversee the rapid changes while training your CTO. Don’t take it lightly; don’t assume anyone can just handle this situation.
To multiple teams
You’ve managed to grow quickly and not end up in the graveyard. Your product is maturing and has multiple parts, available on multiple platforms. For each of those, there’s a dedicated, multidisciplinary team, with a great number of different function titles that used to be just tasks. Product owners, product managers, engineering managers, technical support, operations, user research, user experience design, and more. This is no longer the tight-knit band of developers working to take over the world. People come and go, hiring is a constant process, people management takes a lot of time now. Scaling issues on a regional scale, security, legislation, a company vision, all of these become important whenever a technical or product decision needs to be made and after a few rounds of investment, the CTO now has clear budget and performance goals to meet, set by a board of directors they regularly meet.
Your ideal CTO now is a visionary, understanding the technical side and the product, specifically within the sector of the company.
This is clearly not the same set of skills as before. A lot more weight is given to people management, process and structure, but still, the technical side of things can not be left to the teams alone. Again a giant leap is needed. If this change comes along slowly, your CTO has the time to adapt, learn new skills, but slow growth is usually seen as bad by investors.
Your ideal CTO now is a visionary, understanding the technical side and the product, specifically within the sector of the company. But they are also communicators, with a well developed professional network and the ability to manageupwards, the expectations of the board, and downwards as a manager of managers.
At this point, it is important to not lose touch with the developers, designers, tech support staff, and other technical teams. You’re not a multinational corporation (and even there it helps to keep in touch, but that’s a different subject). Things still move rapidly and changes can be made quickly.
Evolution
The examples above are only that, examples. There are as many journeys as there are companies. What I do hope is that these examples illustrate how a CTO’s skills need to adapt over a short time. Look at the difference between the hacker leading a small group in the beginning and the almost-corporate CTO managing multiple teams — this transformation can happen in just a few very busy years.
So before hiring your first CTO, consider what role this person will fill. What skills do they need and for how long? Will they be able to help you in the next phase too? The required skill set rapidly changes in a quickly changing company. Success or failure, you may need a different CTO.
The MarTech Conference is for forward-thinking, senior-level marketers who are convinced that modern marketing is agile, customer-centric, decentralized, process-driven, people-powered… and technology-enabled.
.gif)
