Help with Buttons

UpstateLeafPeeper · May 23, 2020, 9:19pm

Who said I don’t have good taste?!

I did say earlier that I do not want anything gaudy. However, for sighted users, I think it i snice to have visual clues when it comes to buttons, like mimicking that the button is being clicked.

Have been looking around at images of buttons, and I think I am recalling what I saw and liked in the past.

I think the button used a gradient, and when you hovered over it/clicked on it, the gradient flipped vertically. And in doing so, it gave you the perception that your click was depressing the button like in real life. (I think in the past you did that with a gradient image slice, and maybe adjusted the position of the image so you got that shifting effect.)

But maybe there is a way to do that now just using CSS?

John_Betong · May 23, 2020, 11:10pm

Try the good old fashioned method of setting the border to outset and inset when clicked. I prefer to set the outset colour to transparent and display a different colour for the border when selected.

Changing the selected border width appears to make the button sightly move.

Give it a whirl or do you only want to cut & paste a solution?

UpstateLeafPeeper · May 23, 2020, 11:20pm

No, I am unsure if there is a way to make gradient background shading inside the button using CSS. And also if there is a way to flip that.

Like having the background shading be darker at the top of the button and slowly fade to a lighter shade. And then when you hover, that paradigm flips.

Sorry, all I know is old-school CSS2, so I’m not sure what all is available these days - for instance, I would have never guessed in a million years you could do what you did with your “silly” button!

John_Betong · May 23, 2020, 11:55pm

Did you try searching?

28 CSS Gradient Button That Can Give Depth To Your Design

coothead · May 24, 2020, 12:39am

Hi there UpstateLeafPeeper,

here is another example…

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

…and the code…

https://codepen.io/coothead/fpenvYNPjjM

coothead

UpstateLeafPeeper · May 24, 2020, 9:52pm

@coothead,

So here is what I have so far…

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

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

  <!-- TITLE -->
  <title></title>

  <!-- CSS STYLES -->
  <style media="screen">
    html, body{
      margin: 0;
      padding: 0;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    div#wrapper{
      box-sizing: border-box;
      width: 320px;
      height: 100px;
      margin: 3em;
      padding: 3em;
      border: 1px solid #333;
    }
    
    .myButton{
      display: inline-block;
      padding: 0.6em 2em 0.5em 2em;
      font-family: inherit;
      font-size: inherit;
      font-weight: bold;
      text-decoration: none;
      color: #333;
      border: 1px solid #FFBB4D;                                      /* Darker Orange */
      border-radius: 6px;
      background-color: #FFEC64;                                      /* Gold */
      background: linear-gradient(to bottom, #FFEC64 10%, #FFBB4D);   /* Gold to Darker Orange */
      cursor: pointer;
    }
    
    .myButton:hover{
      background-color: #FFBB4D;
      background: linear-gradient(to bottom, #FFBB4D 10%, #FFEC64);   /* Darker Orange to Gold */
    }
    
    .myButton:active{
      background-color: #FFBB4D;                                      /* ??? */
    }

  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  
  <div id="wrapper">
    <a href="" class="myButton">Submit</a>
  </div>
  
</body>
</html>

It looks pretty close to what I want, but I could use help with the following…

1.) I don’t understand how to make :active work

2.) I read up on MDN about background: linear-gradient, but didn’t really understand it. I want the shading to start off with Gold but then transition to the Darker Orange later on. It seems like the Darker orange happens too soon.

3.) How do you make the gradient line vertical?

4.) How do I center my button vertically and horizontally in the surrounding back?

5.) Anything else I could do to make my button look better?

coothead · May 24, 2020, 10:23pm

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

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

  <!-- TITLE -->
  <title></title>

  <!-- CSS STYLES -->
  <style media="screen">
html, body{
      margin: 0;
      padding: 0;
    }
    
body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

#wrapper{
	  display: flex; /*added */
	  justify-content: center; /*added */
      box-sizing: border-box;
      max-width: 16em;   /* changed - don't use px units */
      /*height: 100px;  removed */ 
      margin: 3em auto;
      padding: 3em;
      border: 1px solid #333;
    }
    
.myButton{
      display: inline-block;
      padding: 0.6em 2em 0.5em 2em;
      font-family: inherit;
      font-size: inherit;
      font-weight: bold;
      text-decoration: none;
      color: #333;
      /*border: 1px solid #ffbb4d; */                                  /* Darker Orange */
	  border: 0.15em inset #ffbb4d;  /* added as an example */
      border-radius: 0.4em; /*changed */
      background-color: #ffec64;                                      /* Gold */
      background: linear-gradient(to right, #ffec64 50%, #ffbb4d);   /* Gold to Darker Orange */
      cursor: pointer;
    }
    
.myButton:hover,
.myButton:active, /*added */
.myButton:focus /*added */ {
	  border: 0.15em outset #ffbb4d;  /* added as an example */
      background-color: #ffbb4d;
      background: linear-gradient(to right, #ffbb4d 50%, #ffec64);   /* Darker Orange to Gold */
    }
    
    /*.myButton:active{
      background-color: #ffbb4d;    
    }                                 removed */

  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  
  <div id="wrapper">
    <a href="#" class="myButton">Submit</a>
  </div>
  
</body>
</html>

coothead

UpstateLeafPeeper · May 24, 2020, 10:35pm

@coothead,

Well, at least you got my box fixed.

Not sure what you were trying to do with the button?!

I was reading an article that said you should style buttons when they are depressed/clicked (i.e. “active”) to give the user feedback.

I was thinking it might look good to make the button an even darker orange when it is clicked. But in the code I posted above, it seems that my pseudo-class (?) isn’t working.

coothead · May 24, 2020, 10:42pm

.myButton:hover {
	  border: 0.15em outset #ffbb4d;  /* added as an example */
      background: linear-gradient(to right, #ffbb4d 50%, #ffec64);   /* Darker Orange to Gold */
    }
    
.myButton:active,
.myButton:focus {
      outline: 0;
	  border: 0.15em outset #ffbb4d; 
      background: #ffbb4d;    
    }

coothead

UpstateLeafPeeper · May 24, 2020, 10:54pm

@coothead,

I guess I’m not understanding what :active and :focus do. Based on the article I was looking at earlier, I was expecting :active to apply a style as I was clicking on the button, but once I released, then it would go back to the regular style.

When I add your code, when I hover over the button, its look changes. But then clicking on the button does nothing new. And after clicking on it, it does look different, though.

I thought the author was suggesting - which would make sense to me - that you want to apply a style (typically a darker button) as the user clicks on it to make it look like it is being depressed I suppose.

Am trying to play around with things, but my original code wasn’t working…

coothead · May 24, 2020, 10:58pm

active - mousedown
focus - click

UpstateLeafPeeper · May 25, 2020, 5:54am

Actually, according to css-tricks…

Link - default styling of an unclicked/unvisited link.

Visited- link has already been clicked.

Hover - mouse pointer is placed on top of a link, however, it hasn’t been clicked yet.

Active - user is in process of clicking on a link, but the mouse button is still depressed.

UpstateLeafPeeper · May 25, 2020, 6:05am

My goal right now is to learn how to change the styling on my test button when the user hovers, and then clicks on link.

I seem to be having some specificity issues, because for the life of me, I cannot get my :hover and :active pseudo classes to work.

(Note: I am chose extreme styling on the pseudo-classes to see if things are working, but no luck?!)

Here is what I have…

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

  <!-- TITLE -->
  <title></title>

  <!-- CSS STYLES -->
  <style media="screen">
    html, body{
      margin: 0;
      padding: 0;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    div#wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 30em;
      margin: 3em auto;
      padding: 3em;
      border: 1px solid #333;
    }
    
    a.myButton{
      display: inline-block;
      margin: 0 1em 0 0;
      padding: 0.2em 1em 0.3em 1em;
      font-family: inherit;
      font-size: inherit;
      font-weight: bold;
      text-decoration: none;
      color: #333;
      border: 1px solid #FFBB4D;                                      /* Darker Orange */
      border-radius: 6px;
      background-color: #FFEC64;                                      /* Gold */
      background: linear-gradient(to bottom, #FFEC64 10%, #FFBB4D);   /* Gold to Darker Orange */
      cursor: pointer;
    }
/*
    a.myButton :link{
      background-color: #EEE;
    }

    a.myButton :visited{
      background-color: #0F0;
    }
*/
    
    a.myButton :hover{
      background-color: #F00;
    }
    
    a.myButton :active{
      background-color: #000;
    }

  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  
  <div id="wrapper">
    <a href="" class="myButton">Renew</a>
  </div>
  
</body>
</html>

coothead · May 25, 2020, 8:17am

This…

 div#wrapper{

…should be …

#wrapper{

This…

  background: linear-gradient(to bottom, #FFEC64 10%, #FFBB4D);

…should be…

  background-image: linear-gradient(to bottom, #FFEC64 10%, #FFBB4D);

This

a.myButton :hover{
    background-color: #F00;
  }
  
a.myButton :active{
    background-color: #000;
  }

…should be…

.myButton: hover{ 
	  background-image: none;
      background-color: #F00;
    }
    
.myButton: active{
      background-color: #000;
    }

coothead

UpstateLeafPeeper · May 25, 2020, 5:47pm

@coothead,

Why did you suggest those changes?

Whatever their purpose, it didn’t fix the fact that my :hover and :active aren’t working.

P.S. Okay, so I just figured out that there cannot be a space between the class selector and the pseudo-class.

.myButton:hover{
}

So that made things, work, but I do not understand the need for

background-image: none;

which was my other issue.

coothead · May 25, 2020, 7:02pm

What you should be asking yourself is;
what effects did you expect from…

    a.myButton: hover{
      background-color: #F00;
    }
    
    a.myButton: active{
      background-color: #000;
    }

coothead

UpstateLeafPeeper · May 25, 2020, 7:12pm

My link/myButton was styled to have a golden gradient background.

For testing purposes, when you hover over the link, I expected it to turn red.

And when you clicked on the link, I expected the background to turn black.

Not following your question about what I expected?

And back to my question to you…

Why do I have to set background-image: none; on just the :hover in order to make things work?

First of all, I have no background image.

Secondly, if I did, why wouldn’t I have to have background-image: none; on :active as well?

coothead · May 25, 2020, 8:04pm

The code that I gave you in post #34 started with
a “golden gradient background”, turned “red” on
hover and “black” on active ( mousedown ). If you
require “black” when clicked then you would need

    .myButton:focus{
	  background-image: none;
      background-color: #000;
    }

…with this HTML…

   <a href="#" class="myButton">Renew</a>

I told you in post 34 to change…

background: linear-gradient

…to…

background-image: linear-gradient

…so that myButton:hover would function
correctly.
It did not need to be added to myButton:active
because the “hover” state remains.
You will notice, though, that I have included it for
"focus".

coothead

UpstateLeafPeeper · May 25, 2020, 8:31pm

Okay, I missed that subtle distinction.

Here is the latest version I have, and it seems to do everything I want for now…

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


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

  <!-- TITLE -->
  <title></title>

  <!-- CSS STYLES -->
  <style media="screen">
    html, body{
      margin: 0;
      padding: 0;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    #wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 16em;
      margin: 6em auto;
      padding: 3em;
      border: 1px solid #333;
    }
    
    .myButton{
      display: inline-block;
      padding: 0.6em 2em 0.5em 2em;
      font-family: inherit;
      font-size: inherit;
      font-weight: bold;
      text-decoration: none;
      color: #333;
      border: 1px solid #FFBB4D;                                      /* Orange */
      border-radius: 6px;
  /*    background-color: #FFEC64;                                      /* Gold */
      background: linear-gradient(to bottom, #FFEC64 10%, #FFBB4D);   /* Gold to Orange */
      cursor: pointer;
    }
    
    .myButton:hover{
/*      background-color: #FFBB4D;                                      /* Orange */
      background: linear-gradient(to bottom, #FFBB4D 10%, #FFEC64);   /* Orange to Gold */
    }
    
    .myButton:active{
      background-image: none;
      background-color: #FFBB4D;                                      /* Orange */
    }

  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  
  <div id="wrapper">
    <a href="" class="myButton">Renew</a>
  </div>
  
</body>
</html>

In the above code, I just use background…

    .myButton{
      background: linear-gradient(to bottom, #FFEC64 10%, #FFBB4D);   /* Gold to Orange */
    }
    
    .myButton:hover{
      background: linear-gradient(to bottom, #FFBB4D 10%, #FFEC64);   /* Orange to Gold */
    }
    
    .myButton:active{
      background-image: none;
      background-color: #FFBB4D;                                      /* Orange */
    }

Can you please help me understand…

1.) What is the difference between background and background-image?

2.) In my code, why do I need background-image: none; in order for hover to work?

coothead · May 25, 2020, 9:31pm

The background shorthand CSS property sets all
background style properties at once, such as color,
image, origin and size, or repeat method.
The background-image CSS property sets one or
more background images on an element.
background-image overrides background-color,
so background-image: none; needs to be applied
for the hover, active or focus to work.

coothead