Web Button Standard Sizes - besttload
In our 4-part series about Call to Action buttons, we have come to the 3rd post in which I explain the impact of shape and size on the effectiveness of a button. With the help of several studies I will show you the best practices in order to increase the CTR (Clickthrough Rate) of the buttons. HTML Button Size Button in HTML is used to submit HTML page. Understand with Example. The Tutorial illustrate an example from HTML Button size. In this Tutorial we create a HTML page, which display you HTML Button with attribute width and height specified. Here is the video tutorial of 'How to specify button size in HTML?'
Learn how to style buttons using CSS.

Basic Button Styling

See Full List On Designerstoolbox.com

Example

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Try it Yourself »

Button Colors

Use the background-color property to change the background color of a button:

Example

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
Try it Yourself »

Button Sizes

Use the font-size property to change the font size of a button:

Example

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Try it Yourself »
Use the padding property to change the padding of a button:

Example

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Try it Yourself »

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Try it Yourself »

Colored Button Borders

Use the border property to add a colored border to a button:

Example

.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Try it Yourself »

Hoverable Buttons


Use the :hover selector to change the style of a button when you move the mouse over it.
Tip: Use the transition-duration property to determine the speed of the 'hover' effect:

Example

See all results for this question
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Try it Yourself »

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Try it Yourself »

Disabled Buttons

Use the opacity property to add transparency to a button (creates a 'disabled' look).
Tip: You can also add the cursor property with a value of 'not-allowed', which will display a 'no parking sign' when you mouse over the button:

Example

Try it Yourself »

Button Width


By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Try it Yourself »

Button Groups


Remove margins and add float:left to each button to create a button group:

Example

Try it Yourself »

Bordered Button Group


Use the border property to create a bordered button group:

Example

Try it Yourself »

Vertical Button Group


Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Try it Yourself »

Button on Image

Try it Yourself »

Animated Buttons

Example

Add an arrow on hover:
Try it Yourself »

Example

Add a 'pressed' effect on click:
Try it Yourself »

Example

Fade in on hover:
Try it Yourself »

Example

Add a 'ripple' effect on click:
Try it Yourself »

Don’t know which size to use for your image or design? We have listed common aspect ratios, along with popular image and photo sizes to help you create your next project.

Cover image via Photographee.eu

What is Aspect Ratio?

The aspect ratio of an image is the proportional relationship of the width to the height. You will recognize it as two numbers separated by a colon in an x:y format. For instance, a 6 x 4 inch image has an aspect ratio of 3:2. An aspect ratio does not have units attached – instead, it represents how large the width is in comparison to the height. This means that an image measured in centimeters will have the same aspect ratio even if it was measured in inches. The relationship between its width and height determines the ratio and shape, but not the image’s actual size.
However, an image’s aspect ratio will change depending on the medium in which it is presented. The aspect ratio of an image displayed on a computer will be different from the aspect ratio of that same image displayed on a phone.
Aspect ratios are a critical part of web content because images need to be uploaded at different aspect ratios for different uses, like desktop vs. mobile or blog vs. social media. When you use the right aspect ratios it ensures your images are displayed as intended without stretching or resolution loss.
Let’s go over some common aspect ratios that are typically used across different spaces.

Common Aspect Ratios

1:1 Ratio

A 1:1 ratio means that an image’s width and height are equal, creating a square. Some common 1:1 ratios are an 8 x 8 inch photo, a 1080 x 1080 pixel image, or typically any profile picture template on social media sites (think Facebook). This aspect ratio is commonly used for print photographs, mobile screens, and social media platforms, but it’s not ideal for most TV or digital formats.

3:2 Ratio

The 3:2 ratio has roots in 35 millimeter film and photography and is still widely used for print sizes. Images framed at 1080 x 720 pixels or 6 x 4 inches are set within this aspect ratio.

4:3 Ratio

A 4:3 ratio is typically used for TV displays, computer monitors, and digital cameras. For every 4 units of width, there are 3 units of height, creating a rectangular shape. An image sized at 1024 x 768 pixels or 8 x 6 inches fits a typical 4:3 ratio.

16:9 Ratio

The 16:9 ratio is mostly seen on presentation slides, computer monitors, or widescreen TVs. This international standard recently replaced the 4:3 ratio for monitors and TV screens, creating a slimmer, more elongated rectangular shape compared to the 4:3 format. Common resolutions in the 16:9 ratio are 1920 x 1080 pixels and 1280 x 720 pixels.

How to Measure Image Size

Unlike aspect ratios, image size determines an image’s actual width and height in pixels. Image size is the dimensions of an image. You can measure image dimensions in any units, but you’ll typically see pixels used for web or digital images and inches used for print images.
It’s important to realize that two different images that have the same aspect ratio may not have the same image size, or dimensions. For instance, an image sized at 1920 x 1080 pixels has an aspect ratio of 16:9, and an image sized at 1280 x 720 pixels also has a ratio of 16:9.
Try Shutterstock and get 10 images for free. Use PICK10FREE at checkout.

Common Image Sizes for Web

If you are uploading images on the web, it’s crucial to understand image size specifications because incorrect image sizes may stretch or distort to fill fixed dimensions.
When you’re working on a website builder or content management system (CMS), like WordPress or Squarespace, the image size requirements will vary according to the theme or template you’re using. Often, the website builder will resize images for you so that they display correctly in several different formats. To therefore satisfy several different standard image sizes, upload an image that’s big enough to reduce without losing resolution and small enough to comfortably fit the width of a standard screen. Squarespace recommends uploading images between 1500 and 2500 pixels wide. Check your template or theme on whatever CMS you’re using to determine the right image size to upload. Similarly, social media websites will often resize images for you, but there’s a sweet spot that will ensure your images display correctly at a few different sizes.
Note: Don’t confuse image size with image file size. Image file size is measured in bytes according to how much space it takes up on a disk or drive (think kilobytes or megabytes).
These are some of the most common image sizes for web.

1920 x 1080 pixels

This standard image size is widely seen across high definition TVs, presentations, and social media cover photos. It follows the 16:9 aspect ratio.

1280 x 720 pixels

This size follows the standard HD format featured in photography and film. It fits the 16:9 aspect ratio.

1080 x 1080 pixels

You’ll see this 1:1 ratio image size used widely across social media, namely Instagram and Facebook posts.

Common Photograph Sizes

Have you ever wanted to print an image or design, but haven’t figured out which size to use? While you can print an image at any size you want, there are some standard photo sizes that will help you narrow down the options. Different sizes work in different environments; display larger prints or posters to bring attention to an event or service, and reserve smaller prints for display in homes or on a counter space.
Printed images and photos are usually measured in inches, although you might see centimeters used in some countries.
Note: If you’re framing an image, you might need two measurements: the image size and the matte size. A matte is a border around the image that extends to the frame. When you print photographs to frame, make sure you know the matte opening size.
These are some of the most common photograph sizes.

4 x 6 or 5 x 7 in

Web Button Standard Sizes Dimensions

These sizes are standard and popular photo sizes, typically for displaying photography or smaller artwork.

8 x 10 in

This size is a step above the smaller popular photography sizes and is common amongst portraits and larger artwork prints.

8.5 x 11 in

Use this standard flyer size for advertisements displayed in areas with limited space. While not as noticeable as larger poster sizes, the flyer size still aims to alert others in smaller settings.

Web Page Sizes Standard

Web Button Standard Sizes

12 x 18 or 18 x 24 in

Larger than typical flyers, these standard poster sizes are ideal when designing for events or advertisements that need to reach a medium audience.

24 x 36 in

Web Button Standard Sizes Chart

Advertisers use this poster size for outdoor advertisements and specified display cases along high traffic locations.

Creating Custom Sizes in Shutterstock Editor

You can create your own custom sizes and resize images in Shutterstock Editor with ease; simply head to the Canvas Size panel located on the right side of the program to enter specific values for the width and height of your image. You can also select from a list of popular image sizes for web.

Standard Web Button Sizes

Click on the lock icon to unlock the ratio, then type in your values in the white boxes. You can choose from dimensions displayed in pixels, inches, or centimeters in the dropdown arrow within the panel.
When you select or type in the dimensions, the canvas within Shutterstock Editor will adjust to display the values you have entered. You can easily edit these values in the future to reflect your specifications if needed. You can also try Shutterstock’s simple image resizer if you need a shortcut.
Interested in improving your image and photo knowledge? Look into these essential articles:

Get 10 free images

Try Shutterstock and get 10 images for free.
Use PICK10FREE at checkout.