Creating buttons that look like mobile-app icons

coothead · January 14, 2021, 11:04pm

You need to read the relative ( ) information
that may be found in the following links…

coothead

UpstateLeafPeeper · January 14, 2021, 11:11pm

I did read those, but you didn’t completely answer my questions…

Why do you have this…

.link-small,
.link-large {
     position: relative;
     display: block;
     width: 6.25em;
     height: 6.25em;
}

And then this…

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

And what is this…

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

coothead · January 14, 2021, 11:36pm

It sets the position, display, width and height
values of the two a elements.

It readjusts the width and height value for the
second of the two a elements.

It readjusts the background-image value for the
second of the two a elements::after.

Note :-

The first image was resized in ‘irfanview’ to 100x100
and uploaded to my site and the second image was
as you posted it and then hot linked from sitepoint ( ).

coothead

.

UpstateLeafPeeper · January 14, 2021, 11:50pm

Okay, I now see your coding style.

Why did you switch from EMs to VH? (That is what was confusing me.)

Okay.

On side note, I guess this approach isn’t very “accessible”, right?

coothead · January 15, 2021, 12:02am

To make it responsive.

Hot linking is generally considered to be bad form.

To compensate for this transgression, I coded the
links to point to https://www.sitepoint.com.

coothead

UpstateLeafPeeper · January 15, 2021, 12:06am

You lost me.

I don’t see any media queries, and either way, why would you define the smaller image using EMs and the larger one using VW?

No, I was saying that my wanting to use an image (or originally an HTML DIV) probably isn’t very accessible to people with disabilities, right?

Or does floating the image on top of the anchor not hurt anything?

coothead · January 15, 2021, 12:23am

Your original image is 454px × 318px and needs to
fit on smaller devices, hence to use of vw units, on
the other hand the smaller image 100px × 100px has
no such requirements, hence the use of em units.

Wrong.

If the image in the link is not viewable, for whatever
possible reason, then the text always is. :

coothead

UpstateLeafPeeper · January 15, 2021, 12:35am

According to MDN…
quote]
vw

Equal to 1% of the width of the viewport’s initial containing block.
[/quote]

So width: 40vw and height: 28vw would make it 40% of whatever the device’s width is and 28% of the device’s height? (And I guess that was the aspect ratio of the original device?)

Couldn’t you use EMs also?

If the smaller image was resized to 100px by 100px, then why do you have to assign it a size of 6em X 6em?

So what your code did was to create a relative box that is 6.25em by 6.25em, and then place an absolute positioned image inside that relative box - making it 100% x 100% of the containing block?

And that absolute image “floats” above the HTML anchor, so that a screen reader can still “see” the hyperlink and matching text?

coothead · January 15, 2021, 10:04am

Yes and No.

Yes, 40vw is 40% of the device’s width.
No, 28vw has nothing to do with the device’s
height, but is the value that retains the image’s
aspect ratio.

Yes of course one could.

The codepen example, was just that, an example
that showed the concept of the link/image method.

Using em units, which I personally prefer, will require
the media queries to be employed at various widths.

Here is an example…

Full Page View
https://codepen.io/coothead/full/RwGEbmW

Editor View
https://codepen.io/coothead/pen/RwGEbmW

Apart from items like border: 1px solid #000
I always code with the em unit.

We are now, at last, singing from the same hymn sheet.

coothead

UpstateLeafPeeper · January 15, 2021, 2:14pm

@coothead,

Thanks for another tool in my toolbelt!

coothead · January 15, 2021, 3:31pm

If you are interested this method was originated by
Tom Gilder and Levin Alexander quite a long time
before CSS ::after made it’s appearance and was
known as…

The Gilder/Levin Method

An empty <span> element was used to contain the
background-image. Purists would maintain that this
was unsemantic, but today though, the ::after
pseudo-element overcomes that niggly problem.

coothead

UpstateLeafPeeper · January 15, 2021, 4:23pm

@coothead,

Is there a way to make the image appear depressed when the user clicks on it?

Just some kind of feedback so it behaves more like an application button being clicked versus a static image.

coothead · January 15, 2021, 5:09pm

Revisit the codepen links in post #29.

coothead

UpstateLeafPeeper · January 15, 2021, 7:15pm

Did you update your code, or did I miss that before?

I was thinking that styling the hover thing might be the way to go.

coothead · January 15, 2021, 7:31pm

Yes, I updated the code.

.link-large {
     position: relative;
     display: block;
     width: 40em;
     height: 28.018em;
     margin: 1em auto;
     border: 1px solid #000;
     box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
     transition: 0.25s ease-in-out; /* added a smoooothie */
  }

 /*  added this */
 .link-large:hover,
 .link-large:active {
     transform: scale( 0.98 );
  }

coothead

UpstateLeafPeeper · January 16, 2021, 1:06am

@coothead,

I took your gallery code from my other thread and combined it with your code from this thread.

The gallery part seems to be working okay, but for the life of me, I cannot understand how your code in this thread works.

<ul class="menu">
	<li>
		<a class="linkThumbnail" href="/path/to/thumbnail.jpg">Analysis</a>
	</li>
</ul>

ul.menu{
	width: 32%;
	margin: 0.5em 0;
	padding: 1em;
}

.linkThumbnail{
	position: relative;
	display: block;
	width: 200px;
	height: 200px;
	margin: 1em auto;
	border: 1px solid #F00;
}

.linkThumbnail::after{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: '';
	background-image: url("../images/thumbnail.jpg");
	background-size: 100% auto;
}

Questions:
1.) Why do I have to set a fixed dimension on the width and height of .linkThumbnail?

I figured those should be percentages so as the screen changes size, they adapt.

Before I added the anchor, having percentage width on ul.linkThumbnail seems like a more responsive way to do things.

My concern is that if I set a fixed width/height that it will cause issues on mobile.

2.) Using 200px X 200px on .linkThumbnail is causing “tiling” in the defined area.

When I set the width: 200px and height: auto, then the thumbnail collapses and you just see a small sliver of the thumbnail.

I can tweak things to make it look like I want, but i want to UNDERSTAND why it isn’t working as expected!

Thanks.

John_Betong · January 16, 2021, 1:30am

Are you aware of FontAwsome?

The free version has hundreds of images and Svg icons that can automatically resize to the containing element.

Here is the CDN version I use:

<link 
rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"`
media="screen"
>

coothead · January 16, 2021, 12:46pm

Hi there UpstateLeafPeeper,

I do not believe that one item can be considered to be a list.

<ul class="menu">
 <li>
  <a class="linkThumbnail" href="/path/to/thumbnail.jpg">Analysis</a>
 </li>
</ul>

That’s the way the method works.
I cannot comment on that, as I cannot see your problem.

coothead

system · April 21, 2021, 4:42pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Help with Buttons HTML & CSS	48	2246	May 25, 2020
What can I use inside a button tag in place of <a>? HTML & CSS html5	14	43359	November 15, 2017
Using an image sprite with just icons HTML & CSS	41	6932	March 12, 2018
Scaling Images for Viewport Widths (Generic Question) HTML & CSS images	17	629	September 22, 2024
Big large buttons multi line text HTML & CSS	11	9060	February 27, 2010

Creating buttons that look like mobile-app icons

Related topics