Creating buttons that look like mobile-app icons

UpstateLeafPeeper · January 14, 2021, 3:07pm

Hello. I would like to make a responsive page that has a couple of square-ish buttons on it that sorta look like the icons you’d see on a mobile phone. The idea being, that the burton would have some kind of graphic or image to make it easier for people to make a selection. (This design is used at kiosks a lot to help people out.)

So my first question is this…

My temp website already has a “wrapper” container that I can make a Flexbox. If I wanted, say 4 squares inside of it that float around and respond to the screen size, would I just give each “button” - a siple DIV - a fixed width and height?

Here is some code to start…

<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

  <title>sp_menu-page-with-buttons.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }

    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;
      background-color: #FFF;
    }

    h2, h3, h4{
      padding: 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    h2{
      font-size: 1rem;
    }

    p{
      padding: 0 0 1rem 0;
    }


    /* PAGE-LAYOUT STYLES */
    #pageWrapper{
      position: relative;
      max-width: 1200px;                 /* Limit size of page. */
      min-width: 375px;                  /* Prevent header from crowding content. */
      min-height: 100vh;
      margin: 0 auto;
    }

    #pageMast{
      position: fixed;
      top: 0;
      width: 100%;
      max-width: 1200px;
      z-index: 2;
      background-color: #FFF;
    }

    #topRow{
      display: flex;
      align-items: baseline;
      line-height: 1.4;
    }

    h1#logo{
      padding: 0;
      font-family: Helvetica, Arial, Sans-Serif;
      font-size: 2.1rem;
      font-weight: normal;
      line-height: 1.4;
      color: #000;
    }

    nav ul{
      width: auto;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      background-color: #48D1CC;
    }

    nav ul li{
      padding: 0.5rem 1rem 0.4rem 1rem;
      background-color: #48D1CC;
    }

    nav li.menuCurrent{
      border: none;
      color: #FFF;
      background-color: #008B8B;
    }

    #pageContent{
      position: relative;
      z-index: 1;
      display: block;
      box-sizing: border-box;
      margin: 120px 0 0 0;
    }

    .wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      /**/
      max-width: 718px;
      margin: 3em auto;
      padding: 1.5rem 1rem 3rem 1rem;
      border: 1px solid #333;
    }
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper">
    
    <div id="pageMast">
      
      <div id="topRow">
        <h1 id="logo">ACME, Inc.</h1>
      </div>

      <nav>
        <ul>
          <li class="menuCurrent">Option-1</li>
          <li>Option-2</li>
          <li>Option-3</li>
          <li>Option-4</li>
        </ul>        
      </nav>
      
    </div>


    <div id="pageContent">
      
      <div class="wrapper">

		<!-- MENU BUTTONS GO HERE -->

        
      </div>
      
    </div>
      
  </div>
  
</body>
</html>

coothead · January 14, 2021, 3:44pm

I have been diagnosed as a ‘Luddite’, the
symptoms of which prevent me from using
anything that is tagged as ‘Smart’ such as
a mobile phone.

Luckily this does not seem to prevent me
from coding items for them but it does mean
that I have no idea what the icons to which
you refer happen to look like.

Would it be possible for you to supply me,
and others who may be interested, the images
that meet your requirements?

coothead

UpstateLeafPeeper · January 14, 2021, 4:00pm

@coothead,

Hi. I am a luddite too, although I was forced into the mobile world against my will.

Forget “mobile” and just think of times you have maybe had to use an ATM or a kiosk somewhere.

I thought it would be nice to have a “menu” - that instead of being hyperlinks that people might not see or pay attention to - to instead have 3-4 square boxes that people could click on to go to different sections of my temporary website.

A “button” would ideally look like and behave like this…

Square
Rounded corners
Possible have a background image (e.g. screenshot of one of my graphs/charts)
When it is clicked it would take you to another page
It can only use HTML/CSS
If there is a way to make it look 3-D (i.e. raised up a bit) that would help
If there is a way to make it look “clickable” (i.e. when you click on the button it appears to move as in depressed/released)

I think that can all be done using a DIV and some newer CSS, but I wasn’t sure where to begin.

And back to my first question…

So should I use a DIV, and add a “width” and “height” to it to make a square, and then put it inside my Flexbox “.wrapper” class and then those “button” DIVs will float around and adpat to different screen sizes?

HTH.

coothead · January 14, 2021, 4:11pm

No, the answer to that, is defined by your requirement…

coothead

UpstateLeafPeeper · January 14, 2021, 4:30pm

@Coot,

Don’t follow your response…

coothead · January 14, 2021, 4:36pm

Sorry about that , I should have spelled it out for you.

The element that ‘would take you to another page’
when clicked is the a element.

coothead

UpstateLeafPeeper · January 14, 2021, 4:41pm

Right, but I figured there was a way to use the anchor along with a DIV or something else.

You can make an image clickable/linkable, right?

So isn’t there a way to use a div to make a button and make it a link too?

Or is there a way to style an image and make it a clickable link too?

Or is there a way to style an anchor to get something that looks like a button?

coothead · January 14, 2021, 4:47pm

Just use the a element.

If you don’t know how to do that, then give me
an image, or the dimensions of the image, and
I will give you example code

coothead

TechnoBear · January 14, 2021, 4:48pm

UpstateLeafPeeper · January 14, 2021, 4:53pm

I don’t have a particular image in mind, and might not even want to use an image.

Most people are used to tapping on buttons to navigate systems these days - and they also help people who have poor vision - and so that is what I am shooting for.

One button I would like to take a screenshot of a graph I create and use that for the “Analysis” section, but for another button maybe I just want test in a square that says “Blog”.

That is why I thought starting with a DIV might be a good place to start since you can make squares with round corners, and shade them, etc.

Are DIVs completely out? And is my only option to make things pretty to use images?

UpstateLeafPeeper · January 14, 2021, 4:57pm

Maybe a button that is 50px X 50px or 100px X 100px.

coothead · January 14, 2021, 5:12pm

Hi there UpstateLeafPeeper,

Do they look something like this…

coothead

UpstateLeafPeeper · January 14, 2021, 6:04pm

Maybe like these…

And this one is probably the closest to what I was envisioning, but the more simple ones above will do too…

**Note: The idea is that buttons like this would form a grid and be easier for people to read and click than hyperlinks. This is what you might see at a touch-screen kiosk at a shopping mall or store or even at your ATM.

coothead · January 14, 2021, 7:03pm

Hi there UpstateLeafPeeper,

here are a couple of examples…

Full Page View:-
https://codepen.io/coothead/full/mdrQGex

Editor View:-
https://codepen.io/coothead/pen/mdrQGex

coothead

UpstateLeafPeeper · January 14, 2021, 7:51pm

@coothead,

You are always such a big help!

Let me try and figure out your code.

In the mean time, do you think what I am trying to do makes sense from a user standpoint

The plan was to have a page that is a navigation page, and maybe have an H2 at top hat says, “Click a button to go to a section…”

Will users get what to do?

I thought that having a button with a picture of a graph would be intuitive for a section full of graphs/charts. And that a button with a photo of a person might be good for a photo gallery, and so on.

Thoughts?

coothead · January 14, 2021, 8:34pm

I’m a little bereft of thoughts about your plan but
adding the ‘title attribute’ to the ‘a attribute’ might
be prudent.

coothead

UpstateLeafPeeper · January 14, 2021, 8:48pm

@coothead,

Well, I am doing it, because I don’t want a blank page with 3 tiny hyperlinks on it and nothing else…

coothead · January 14, 2021, 9:01pm

It is content that dictates markup.
Content plus markup plus device dictates layout.
Until you have meaningful content, you should
not be applying any markup or style.

When you have completed ‘item 3’ and presented it here
it is possible that I, or someone more proficient than me,
will able to share their thoughts on your newly created
document.

coothead

UpstateLeafPeeper · January 14, 2021, 10:14pm

@Coot,

Some questions about your code…

body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

.link-small,
.link-large {
     position: relative;
     display: block;
     width: 6.25em;
     height: 6.25em;
     margin: 1em auto;
     border: 1px solid #000;
     box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
  }

Why do you use relative?

.link-small::after,
.link-large::after {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     content: '';
     background-image: url( https://www.coothead.co.uk/images/stock-analysis.png );
     background-size: 100% auto;
 }

What is this doing?

My understanding is that ::after inserts text after the element it is associated with, but why would you place the image “after” the anchor?

And why do you use absolute positioning?

And shouldn’t width: 100% and height: 100% fill the entire screen?

.link-large {
     width: 40vw;
     height: 28vw;
 }

What is this doing?

I’m confused how you seem to keep changing the width and height…

 .link-large::after {
     background-image: url( https://global.discourse-cdn.com/sitepoint/original/3X/f/d/fdc36c60a0d76d653382327e81e3bf660f3ed829.png );
 }

Why are you resetting things here?

UpstateLeafPeeper · January 14, 2021, 10:19pm

I have a top menu and if someone clicks on a menu option (e.g. “Money”), then I load a “Money” landing page. Originally I was going to have all content here, but then I decided it would be better to separate things into sub-categories. So now I want the “Money” landing page to have 3 square buttons that say something like: “Financials”, “Interviews” and “Blog”

Having a top menu and an empty page with 3 sub-categories would look silly.

Having 3 square buttons like the sample above would look better.

So that is why I am here…

Topic		Replies	Views
How to make responsive squares in CSS HTML & CSS	11	6243	August 21, 2017
Help with Buttons HTML & CSS	49	2006	August 25, 2020
Any expert please convert this button design into html css code HTML & CSS	9	2294	September 12, 2024
Very 3D buttons HTML & CSS	12	1220	October 18, 2023
Making my header / Nav Responsive HTML & CSS	2	1777	June 3, 2019

Creating buttons that look like mobile-app icons

Related topics