Styling Links as Buttons with CSS3

With CSS, it’s easy to turn any a tag into a stylish button. In less than 10 lines of CSS, you can go from this:

Screen Shot 2016-06-21 at 2.58.45 PM

to this:

Screen Shot 2016-06-21 at 2.58.21 PM

All you need to do is get rid of the default text-decoration (underline), add some padding, a background color, a slight border-radius, and a box shadow. Here’s an example of how the code should look:

a.button{
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
background-color: #5354a3;
color: #fff;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}

Tweak the styling to your liking to customize the look and dimension of your own buttons.

CSS3’s Color Property

I think it’s safe to say that almost every beginner developer knows that CSS’s color property is used to define the color of your HTML text elements. What many beginner developers might not know, however, is that the color property can also be used to define the color of other HTML elements as well. In addition […]

Read on...

Quick Tip: font-size: larger, font-size: smaller

Screen Shot 2016-06-16 at 2.42.40 PM

The CSS font-size property is most often assigned numeric values in the amounts of px, em, or rem, but what many developers may not know is that the property can also accept other values, like ‘larger’ or ‘smaller’. When you give the value ‘larger’ or ‘smaller’ to the font-size property, the font-size for that element […]

Read on...

CSS visibility: hidden vs. display: none

Screen Shot 2016-06-15 at 3.08.24 PM

At first glance it might seem like CSS’s display: none rule and it’s visibility: hidden rule have the exact same function, but that’s not entirely accurate. While it’s true that both rules render an HTML tag invisible, they do so in different ways. Display: none completely strips an element from the page. This means that […]

Read on...

Quick Tip: Using Border-Radius to Create Round Elements

Screen Shot 2016-06-02 at 8.31.40 AM

CSS3’s border-radius property is most commonly used to add rounded corners to elements that are otherwise square. It’s a great tool for adding some softness to your designs. Less commonly, the property is also used to turn square images into perfect circles (if you’re looking for a circle, your image has to be square, otherwise […]

Read on...

Tips for Using CSS in HTML Emails

Using CSS in HTML emails can be a tricky business, mostly because it seems like just about every email client has different rules about the amount of CSS they support. Keeping this in mind, here are some tips to use that will help make sure your HTML emails are compatible across all email clients and […]

Read on...

Using the Max-Width Property in Responsive Design

Most developers know that in order for a site’s structure to be responsive and mobile-friendly, it’s better to define widths of divs and other HTML elements using percentages rather than pixels. Using percentages to define widths allows the widths of HTML elements to change while maintaining the same relation to the size of its parent […]

Read on...

Create Dropdown Hover Effects Using CSS

Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved in a much more lightweight way by using CSS.   If you want an HTML element to appear when another element is hovered upon, your HTML might look something like this: The .hover div is […]

Read on...

Create Columns Easily with CSS3’s Column-Count

CSS3’s column-count property makes it easy for you to turn your content into columns with only one line of CSS and no extra HTML markup. Let’s say you have a div made up of a few paragraphs, like this: If you want to spread that content out across three adjacent columns, you can do it […]

Read on...

CSS3 Embossed Text Effect

CSS3’s text-shadow property can be used to achieve so many cool text effects, including an embossed effect. This effect is created by giving the text-shadow property  values of -1 for the horizontal and vertical shadow, and leaving the blur-radius at its default of 0. Then horizontal and vertical shadow values of positive 1 are layered on […]

Read on...