Uncommon Two-Toned CSS Gradients

How can I create a button that matches the attached image using CSS?

I know how to achieve the border-radius, but I'm struggling with the color. Any tips?

I attempted something like this:

.button {
    border-radius: 0 4px 4px 0;
    background-image: linear-gradient(to bottom, #000000 0%, #ffffff 50%, #000000 100%);
    display: inline-block;
    line-height: 2em;
    padding: 0 10px;
    color: #FFF;
}

However, the button doesn't look right at all :(. Here is the http://jsfiddle.net/mcqb6zf7/ for reference. Can someone assist me with this?

csslinear-gradients

Answer №1

Consider using a code snippet like the one below to create a gradient effect: 

.gradient {
  height: 100px; 
  width: 300px;
  background: rgba(76,76,76,1);
  background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
  background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
  background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
  background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
  background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 ); 
  }
<div class="gradient"></div>

Answer №2

Have you considered modifying the background property in your code to achieve the desired outcome?

.button {
  border-radius: 0 4px 4px 0;
  background: rgba(76, 76, 76, 1);
  /* Old Browsers */
  background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76, 76, 76, 1)), color-stop(12%, rgba(89, 89, 89, 1)), color-stop(25%, rgba(102, 102, 102, 1)), color-stop(39%, rgba(71, 71, 71, 1)), color-stop(50%, rgba(44, 44, 44, 1)), color-stop(51%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(17, 17, 17, 1)), color-stop(76%, rgba(43, 43, 43, 1)), color-stop(91%, rgba(28, 28, 28, 1)), color-stop(100%, rgba(19, 19, 19, 1)));
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
  /* IE 10+ */
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0);
  /* IE6-9 */
  display: inline-block;
  line-height: 2em;
  padding: 0 10px;
  color: #FFF;
}
<div class="button">This is a button</div>

Answer №3

Just created this gradient in under a minute using . Check it out on Fiddle: http://jsfiddle.net/8og02fd3/

.grad{
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top,  #000000 0%, #595959 51%, #595959 51%, #000000 53%, #000000 53%, #111111 60%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(51%,#595959), color-stop(51%,#595959), color-stop(53%,#000000), color-stop(53%,#000000), color-stop(60%,#111111), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top,  #000000 0%,#595959 51%,#595959 51%,#000000 53%,#000000 53%,#111111 60%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #000000 0%,#595959 51%,#595959 51%,#000000 53%,#000000 53%,#111111 60%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #000000 0%,#595959 51%,#595959 51%,#000000 53%,#000000 53%,#111111 60%,#1c1c1c 91%,#131313 100%); /* IE10+ */ 
    background: linear-gradient(to bottom,  #000000 0%,#595959 51%,#595959 51%,#000000 53%,#000000 53%,#111111 60%,#1c1c1c 91%,#131313 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ 
}

<span class="grad"> </span>

Will it maintain the same appearance?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

phpjavascripthtmlcssajax

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...

cssinternet-explorer-6vertical-alignment

Exploring the power of nested styled components in Material UI is a great way to elevate the styling of your project

Can someone explain how to access a second styled component using '@mui/system' in order to add a hover effect to a parent element that will modify the max-height of its child? Please keep in mind that I am referring to mui's styled compone ...

cssmaterial-ui

Placing text over an image appears to be causing the navigation links to vanish - could it be a conflict with floating elements?

As a beginner, I'm facing a rather embarrassing situation here. Picture me banging my head on the table level of embarrassment... but let's give it a shot anyways. I've got a navigation bar and an image underneath (not behind). Both seem to ...

htmlcss

"Centered in the middle of the screen, an animated

Encountering an issue with this code on Chrome. Clicking on the checkbox causes the text/checkbox to shift in position/padding/margin unexpectedly.. :( View the code on JSFiddle HTML <input id="inp" type="checkbox" /> <div id="cb" class="inp_ch ...

javascriptjqueryhtmlcss

Is there a way to center a particular flex item horizontally within its parent container?

Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically ce ...

htmlcssflexbox

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

javascriptcssangularjshtmlangular-directive

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

When utilizing Twitter Bootstrap, the validation classes like has-error or has-warning must be added to the wrapping form-group element to style both the input and its label. However, Knockout-Validation directly adds the class to the input element itself. ...

javascriptcsstwitter-bootstrapknockout.js

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

csshtml

Adjust the font size to fit within the container

My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4). Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How can you animate a MUI v4 Grid element using CSS transitions?

I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...

javascriptcssreactjsmaterial-ui

Resolution for Reflected Diagonal Backdrop Design

Encountering a bug in Firefox with my mirrored diagonal background pattern. A vertical line appearing between left and right positioned elements at certain screen widths. Seeking a CSS solution or hack, no linked image files allowed. .stripes-background ...

cssbackground-imagerepeating-linear-gradient

Display the value of a shortened string

My Goal I aim to develop a method for determining the amount of a string visible before it gets cut off. Motivation In my project, there is a collection of items that can be chosen. A panel presents a concatenated string of the selected item names separa ...

javascripthtmlcssangular

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: https://i.sstatic.net/Hg0CA.png Here is my code snippet from ...

javascripthtmlcssreactjsmaterial-ui

CSS for decorating an image with a border and transparent background

Struggling to add a border while converting a PSD to HTML? Is it possible to apply a border to an image with a transparent background? For instance, let's consider the following image: Imagine wanting to place a border around the caret in the image l ...

htmlcss

Is there a way to remove backdrop-filter: blur effect from elements within a div?

Having an issue with a CSS property. I have designed a modal that includes inputs and labels, and I want to blur the background content. However, the problem I am facing is that the blur effect is also being applied to all elements inside the container, in ...

htmlcssblur

Replacing Material-UI dialog fonts

I have created a unique User Confirmation Dialog using the Material UI Dialog component, similar to the example provided here While working on customizing the dialog, I encountered an issue with changing the font. Although I was able to change the color a ...

cssreactjsmaterial-ui

Troubleshooting Problems with Positioning and Floating in HTML and CSS

I'm facing some challenges with clearing floats (or it could be something else?). My goal is to have the #newsbar div free from the previous floats so that its width can extend 100% across the page/browser. I believe I've tried everything within ...

htmlcss

JavaScript tip: Improve the way you highlight the current navigation page while scrolling by finding alternative methods to using "scrollY > x"

Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT. Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position: let home = document.querySelector(" ...

javascripthtmlcssscroll

Creating a NgFor loop in Angular 8 to display a dropdown menu styled using Material

I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside. <p>User ...

cssangulardropdownmaterializeangular-materialize