Help with Buttons

HTML & CSS
1

Hello, I am trying to get back into HTML and CSS after a long time away.

What is the best and newest way to create buttons using HTML/CSS?

The only thing I recall is creating a form button using, I think, an < input > tag.

My goal is to learn how to creating buttons not only for HTML forms, but also styling hyperlinks to look like buttons.

And since I do not have Photoshop, and am not really knowledgeable with such tools, I am hoping in modern web design there is a way to do all of this using HTML/CSS.

Oh, and I suppose whatever I use should be mobile friendly as well.

Thanks in advance!

2

Hi there UpstateLeafPeeper,

perhaps this will give you some ideas to play with…

https://codepen.io/coothead/full/oNjmopp

…and here is the code…

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
 }
 
#container-1,
#container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1em;
    margin: 0.5em 0;
    border: 1px solid #999;
    background-color: #fff;
 }

#container-1 input, #container-2 input,
#container-1 button, #container-2 button,
#container-1 a, #container-2 a {
    padding: 0.25em 1em;
    margin: 0.5em;
    border: 1px solid #999;
    border-radius: 0.25em;
    background-image: linear-gradient( to bottom, #eee, #ccc );
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
    font-size: 1em;
    color: #444;
    text-decoration: none;
 }

#container-2 input,
#container-2 button,
#container-2 a {
    padding: 1em 2em;
    border-radius: 0.5em;
    background-image: linear-gradient( to bottom, #99f, #33f );
    font-size: 1.25em;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 1px 1px #000, 1px 0 1px #000;
    white-space: break-spaces;
 }
</style>

</head>
<body> 

 <div id="container-1">
  <input type="button" value="this is an &#x00022;input&#x00022; element">
  <button>this is a "button" element</button>
  <a href="#">this is an "a" element</a>
 </div>
 
  <div id="container-2">
  <input type="button" value="this is an &#x00022;input&#x00022; element">
  <button>this is a "button" element</button>
  <a href="#">this is an "a" element</a>
 </div>

</body>
</html>

coothead

3

Hi @coothead! Long time no speak!

In the link you posted, are there two rows of buttons?

And are they supposed to do anything when you click them?

They look like nice buttons, but it almost feels like I was clicking on a dead image.

4

There’s nothing wrong with your eyesight. :biggrin:

No, their function was not specified by you. :biggrin:

The example that I provided will hopefully help a little with that desire. :biggrin:

coothead

1 Like
5

@coothead,

Lots more questions!

1.) Can you use a < button > element in place of an < input > element on a form?

2.) What is the difference between a < button > element and an anchor, < a >, element?

3.) Is it possible to use a < button > element for everything?

4.) I cannot find a link or the code right now, but I recall seeing a button that used an image that was a thin strip and I think the CSS made it flip? This made the button look three-dimensional, and what was better is that when you hovered over it, it looked like the button was moving! So when you hovered and clicked on this button, you had the perception that it was moving just like you would see in a regular application like MS Word.

How can I do that?

6
  1. Yes.
  2. Unlike the input element the button element can
    have content other than text.
  3. The button element can be used for everything that
    it’s usage would be semantically correct.
  4. CSS allows the coder to do all manner of effects for HTML
    elements. Personally though, I believe that form element
    styling should be kept well within the bounds of impeccable
    good taste.

I would need to see an example

coothead

7

I can’t find an example, but as I recall it used an image slice as the button background, and then on hover I think maybe it moved the image slice so it made the button look like it was moving when you clicked?

I have been looking online for examples, but no luck.

Does that ring a bell?

8

No, not really. :unhappy:

CSS3 has a plethora of effects that can make
almost any effect that you may desire.

I would suggest that you keep on looking. :winky:

Patience is the keyword here. :biggrin:

coothead

1 Like
9

Well, one thing I didn’t care for in your example was that the buttons look flat as a pancake.

How can I make them look three-dimensional?

Also, how can I make them change when you hover over them and click?

10

Google is your friend smile

https://www.w3schools.com/csS/css3_buttons.asp

11

And I pointed out that I don’t believe in messing about
with form elements.

Here is an example of a silly button element…

https://codepen.io/coothead/full/jObddOY

…and the it’s code…

https://codepen.io/coothead/pen/jObddOY

I’m sure that, with just a little practice, you could make
something as equally silly. :biggrin:

coothead

3 Likes
12

@ronpat, thanks for the useful guide. That will help somewhat, but that doesn’t cover what I was talking about with @coothead.

13

@coothead, that is the COOLEST button I have ever seen!!! :+1:

But still not what I am trying to describe.

Having some computer issues, so I haven’t been able to search anymore.

In the mean time, let me try again…

As I recall, there was a way to take a background image, or really I think it was a slice of an image, and make the background of the button, but when you hover over the button I think CSS shifts the image so it looks like you are clicking on it.

I’ve seen this in the past, but any bookmarks I have are gone.

The things that stood out to me was that the button appeared raised from the webpage slightly so it looked 3-dimensional, and then also when you clicked on it the lighting on the button changed so it looked very animated.

With some of the W3C examples on the link above, the shading looks very binary - one color when you click, one color when you let got.

With this example I am trying to describe, the shading changed gradually as you hovered over and clicked the button, almost like a gradient.

Let’s me Google some more and see if I can find an example.

Maybe some of what I said above will help?

P.S. Not looking for anything gaudy, just a button that looks more like you’d see in a desktop application than a flat colored box on a web page.

14

Maybe further investigation could be what you are seeking:

https://www.w3schools.com/CSSref/css3_pr_border-image-outset.asp

15

Nope, that didn’t help.

See post #13.

16

Hi there UpstateLeafPeeper,

here’s another extremely silly button…

https://codepen.io/coothead/full/OJyqMKR

…and it’s code…

https://codepen.io/coothead/pen/OJyqMKR

coothead

1 Like
17

Very cool “extremely silly button”, @coothead.

Any ideas on what I am asking for, though?

(It sounds like you aren’t following what i had in mind, huh?)

18

Mind reading has never ever been my forté. :unhappy:

Finding examples of what you have in your
mind doesn’t seem to be your forté either. :biggrin:

coothead

3 Likes
19

If I could find the buttons I saw in the past I probably wouldn’t be asking for help… :wink:

While I am trying to find examples of what I remember, I have some more questions…

1.) I assume that using images for buttons is a very bad idea in the modern world, right? (Long ago, I recall people making these cool glass 3-D buttons in Photoshop.)

2.) What kinds of things make for a good modern button? (I suppose avoiding Javascript.)

3.) Do you have preferences for making modern (and mobile) buttons?

Maybe I am overthinking things, and a button doesn’t have to look raised or 3-D?

20
  1. yes, a bad idea.
  2. The HTML button is just fine out of the box
  3. See 2.

With a little bit of luck, you’ll come round to my
way of thinking, which I expressed in post #6…

“Personally though, I believe that form element
styling should be kept well within the bounds of
impeccable good taste.”

This implies giving the user a form that can be filled
without problems and designer driven distractions.

coothead