What is the best technique for arranging buttons on a webpage?

As I dive into the world of creating chrome extensions, I've successfully added buttons and styled them with CSS. Now, my challenge is to arrange these buttons in three columns and two rows. How can I achieve this?

Despite experimenting with various styling options and adjusting the 'position' property in CSS, I'm struggling to find a solution online.

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
<a href="https://google.co.uk" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button">>Button</a>

I'm aiming to organize these buttons into rows and columns instead of having them all in a single row.

htmlcssgoogle-chrome-extension

Answer №1

A great way to design this would be by utilizing a CSS Grid Layout. To add style, consider using the CSS Flex Layout.

We opt for CSS Grid because of the convenient grid-template-columns property which manages column sizing by specifying the number of columns (3) and their size tracks. For a comprehensive guide on Grid Layout, visit: https://css-tricks.com/snippets/css/complete-guide-grid/

The use of CSS Flex for styling is ideal if you aim to center the button. By setting a min-max row height beforehand; however, you can achieve similar results with Grid Layout by adding place-self: center;. This method requires manual size adjustment.

To implement these techniques, follow these links:

Execute the provided code snippet below:

body {
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
}

.button {
  border: 1px solid transparent;
  border-radius: 3px;
  border-color: #0095ff;
  box-shadow: 0 0 0 0 rgba(0,149,255,0);
  color: #07C;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.button:hover {
  background-color: rgba(0,119,204,0.05);
  color: #005999;
}
<div class="grid">
<a href="#" class="button">Button1</a>
<a href="#" class="button">Button2</a>
<a href="#" class="button">Button3</a>
<a href="#" class="button">Button4</a>
<a href="#" class="button">Button5</a>
<a href="#" class="button">Button6</a> 
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning an image within the layout of a Ghost theme

I'm currently using Ghost's free Starter theme and I'm attempting to center an image that is wider than the paragraph and main element (60rem). These are the key CSS elements that control the positioning of the image. I can achieve full wid ...

htmlcssimageghost-blogghost

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

javascriptjquerycssqtip2

Having trouble with compiling SCSS code

While diving into the world of SCSS, I decided to compile my SCSS into CSS using npm. So I entered npm run compile: sass as defined in my package.json as follows: "scripts": { "compile:sass": "node-sass sass/main.scss css/style ...

cssjsonnpmcmdsass

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

Can the color of the expanded navigation bar in Bootstrap 4 be customized?

I'm currently in the process of developing a Bootstrap website and was wondering whether it is feasible to add a background color to the expanded navbar specifically on small screens. Feel free to refer to the images below for a visual representation ...

htmlcssbootstrap-4

Troubleshooting a hover problem in CSS navigation bar

Having some trouble with the CSS menu on my website click here. I've tried adjusting the code, but can't seem to get all the menu levels to line up properly. As a beginner in CSS, I'm sure I'm overlooking something simple. When hovering ...

htmlcssmenuhover

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss

Is there a way to automatically float right on smaller screens and float left on larger screens?

Is there a way to create an effect where the image is on the left side of the text, but when the screen size is reduced, the text goes on top and the image is below? Currently, I have the opposite layout - the image appears above the text when the screen ...

htmlcsstwitter-bootstrapbootstrap-4

What is the correct way to center-align elements?

I have a basic grid layout that has been styled using CSS. #videowall-grid{ width:700px; border:1px dotted #dddddd; display: none; margin: 5px auto; padding: 5px; } #videowall-grid .square{ padding: 5px; margin: 5px; bo ...

htmlcss

Ways to trigger a JavaScript notification

I consider myself experienced in scripting, but I can't seem to figure this out. I'm trying to trigger a function on a button click event, so I decided to start by testing the buttonclick event with a basic window.alert. I wrote the following htm ...

javascriptjqueryhtmlalert

Leveraging the power of React in conjunction with an HTML template

After purchasing an HTML template from theme forest, I am now looking to incorporate React into it. While I find implementing Angular easy, I would like to expand my skills and learn how to use React with this template. Can anyone provide guidance on how ...

javascripthtmlcssreactjsfrontend

Is it possible to generate an HTML file without MathML by rendering MathJax/MathML at compilation/preprocessing time?

I am looking for a solution to convert webpages with heavy MathJax (or MathML) usage into ebooks for display on my Kindle, which does not fully support JavaScript or MathML. I am interested in preprocessing the .html files by running MathJax during a com ...

javascripthtmlcssmathjaxmathml

Various methods for deactivating controls in a CSS class

Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...

javascriptjquerycsswebforms

Most effective technique for resizing HTML elements

Currently, I am exploring different methods to scale HTML elements for a large screen, such as a kiosk. I have been using CSS3 scale() to achieve a relatively cross-browser scale, but I am curious if there are better options available. My main focus is on ...

htmlcsssvgwidgetscale

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

javascriptjqueryhtmlcsshighcharts

Move a div element as you scroll down the page

I currently have a div that appears when a user scrolls down a page. When clicked, it sends you back to the top of the page. Right now, it simply fades in and out, but I would like it to slide in from the right side of the page. Below is my existing code: ...

jquerycsshtmljquery-animate

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

What is the process of extracting attribute values from child elements in XPath for HTML documents?

Initially, I searched for all the necessary elements, but now I am encountering errors while trying to retrieve attribute values from the child elements - title, URL, and image. What could be the mistake in my approach? function getContent($value) { ...

phphtmlxpath

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

javascriptjqueryhtmlcsslayout

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

htmlcssless