0

trying to build a button (or text box) that looks and works as follow: Top half button background white or transparent, bottom half of button background solid color. Upon hover the orange should change to blue (hover color I can do). Color should be behind text. Text should not change color, only the 'bar'. the sample button

Have tried:

  1. Bottom border only (+-10px thick + color), white button background - but cannot seem to set a negative value on the border so that the text are in front of color.
  2. Used Ultimate CSS Gradient Generator and manipulated the gradient to solid and it worked on the site, but I don't feel that this is sustainable (too much code for a simple function).

Please help.

Nadene Truter
  • 9
  • 1
  • Welcome to SO, to get the best answer for your question try to show up your code and what you have tried, so we can help you. – Minal Chauhan Jan 18 '21 at 11:07

2 Answers2

2

Make use of a trick available with gradients: specify where the first color ends and where the second color starts. I used 8px and 9px to give a simple demonstration. To get the hover effect, override the color in the gradient definition:

button { 
  border: none;
  background: linear-gradient(to bottom, transparent 8px, orange 9px);
}

button:hover {
  background: linear-gradient(to bottom, transparent 8px, blue 9px);
}
<button>Button</button>
Pine Code
  • 2,466
  • 3
  • 18
  • 43
  • This is not valid - you should not have div elements in a button - W3C validator gives this: Error: Element div not allowed as child of element button in this context. – A Haworth Jan 18 '21 at 11:46
  • I refactored it; now it’s much simpler, and it’s valid HTML code. It’s possible to simulate a sharp gradient specifying the points on which the first color ends and the second color begins. It’s possible to be more precise specifying decimal values, too. – Pine Code Jan 19 '21 at 10:18
2

I've used absolute positioned psuedo elements to achieve your desired result

ps:

The ::before element isn't necessary if you want it transparent but if you want 2 colors you can use it

button {
  background: none;
  border: none;
  position: relative;
}

button span {
  position: relative;
  z-index: 2;
}

button::before,
button::after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
}

button::before {
  top: 0;
  background-color: transparent;
}

button::after {
  bottom: 0;
  background-color: orange;
}

button:hover::after {
  background-color: blue;
}
<button>
  <span>BUTTON</span>
</button>
Nico Shultz
  • 1,872
  • 1
  • 9
  • 23
  • This is OK but rather complex - a background-color of linear-gradient(to top, orange 0%, orange 50%, transparent 50%, transparent 100%) and similarly for hover on the button element is enough. – A Haworth Jan 18 '21 at 11:47
  • @AHaworth you are right although he specificly asked "NO gradient" :) – Nico Shultz Jan 18 '21 at 11:52
  • Yes, but I suppose it depends on what you mean - there is no gradient in the colors, they are solid. – A Haworth Jan 18 '21 at 11:55