Create buttons and tooltips with HTML and CSS

It’s quite remarkable that visual shapes and many other objects can be created with just HTML and CSS.

Of course, that means you don’t have to turn to an external illustration tool, which translates directly to valuable time savings.

In a previous blog post, I presented some examples of basic shapes with HTML and CSS.

There are many practical use cases for shapes created natively on the web. Perhaps the most apparent is a button ⎼ an essential interaction element with forms and other user interfaces. Another common usage for shapes is a tooltip, or the visual callout that pops up when you hover or click on something.

Making a button

Here’s an example of a button, and the code behind it.

CLICK ME
<!-- define a button -->
<div class="button">CLICK ME</div>
div.button {
	width: 180px;
	height: 60px;
	border-radius: 30px;
	text-align: center;
	line-height: 60px; /* enables vertical text centering when set to same value as the height */
	color: #fff;	
	background-color: midnightblue; 
}

It’s actually more semantically and functionally “correct” to use the HTML native <button> tag, rather than <div>. If you do use <button>, then you’ll want to reset some default CSS before applying your own styling.

<!-- define a button -->
<button>CLICK ME</button>
button {
	border-width: 0; /* reset default CSS */
	padding: 0; /* reset default CSS */
	… /* your styling goes here */
}

Making a tooltip

Let’s now look at creating a tooltip. Basically it begins with a rectangle and some text inside.

CALLOUT
<!-- define a tooltip -->
<div class="tooltip">CALLOUT</div>
div.tooltip {
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px; /* enables vertical text centering when set to same value as the height */
    color: #fff;
    background-color: teal;
}

Tooltips usually have an arrow pointing to the object that the user has hovered over or tapped. Let’s add an arrow here that points left.

callout

To create the arrow, you’ll need to dig into a little more CSS and add what’s known as a pseudo-element to latch on some additional content. It’s basically tacking on a triangle shape, then positioning it precisely to align with the rectangle.

To enable the positioning, you need to define some CSS position properties.

div.tooltip {
    position: relative; 
    … /* your styling goes here */
}

/* create the arrow with a pseudo-element */

div.tooltip::before {
    content: '';
    position: absolute;
    /* define the triangle shape */
    border-width: 10px;
    border-style: solid;
    border-color: transparent teal transparent transparent;
    /* position the triangle */
    top: 50%;
    left: 0%;
    margin-left: -20px;
    margin-top: -10px;
}

Flexing to the content

A key benefit of web-native visual shapes and objects is that they can adjust to the amount of content contained in them.

For example, you can have a tooltip resized automatically to the text.

Tooltip text
This is some more text in a tooltip

In this case, the width is fixed while the height adjusts to the text. This auto-sizing can only be accomplished with web-native visual objects, when compared to creating them externally with Photoshop or Illustrator.