Gradient Border on CSS Button

I'm trying to create a button with a silver-ish border and gradient like the one in the picture. I've managed everything except for the border, which is giving me some trouble. Here's the current CSS code I'm using for the button.

https://i.sstatic.net/IkQTy.png

.button_submit {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0cbbc8), color-stop(1, #008995));
    background:-moz-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:-webkit-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:-o-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:-ms-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0cbbc8', endColorstr='#008995',GradientType=0);
    background-color:#0cbbc8;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
}
.button_submit:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008995), color-stop(1, #0cbbc8));
    background:-moz-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:-webkit-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:-o-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:-ms-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008995', endColorstr='#0cbbc8',GradientType=0);
    background-color:#008995;
}
.button_submit:active {
    position:relative;
    top:1px;
}

Answer №1

To achieve a similar effect, consider using the box-shadow property. You could also experiment with a :before pseudo-element to create a white background.

The essential part I included is:

box-shadow: 0px 2px 5px -1px #333;

You may need to adjust this code to suit your needs, but it should provide a good starting point.

.button_submit {
    position: relative;
    box-shadow: 0px 2px 5px -1px #333;

    background: linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);
    background-color: #0cbbc8;
    border-radius: 6px;
    border: 1px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
}
.button_submit:hover {
    background: linear-gradient(to bottom, #008995 5%, #0cbbc8 100%);
    background-color: #008995;
}
.button_submit:active {
    position: relative;
    top: 1px;
}
<button class="button_submit">
Submit
</button>

Answer №2

To create space and add another div containing the same width and background gradient within, set the appropriate z-index.

Answer №3

.button_submit {
    position: relative;
  
    background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);
    background-color:#0cbbc8;
    border-radius:6px;
    border:1px solid linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
}
.button_submit:hover {
    background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%);
    background-color:#008995;
}
.button_submit:active {
    position:relative;
    top:1px;
}
<button class="button_submit">
Submit
</button>

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

Expanding a feature that modifies the CSS properties of every input element

Creating a text tracking (letter-spacing) demonstration where range sliders are used to update CSS properties. I'm looking to improve the functionality so that the labels also update dynamically, without repeating output2.textContent = this.value;. An ...

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

Implementing CSS injection on a Next.js page during server-side rendering - tips and tricks!

I recently started working with next js. In my _app.tsx page, I have the following code: import '../styles/antd.css' import '../styles/globals.css' import type { AppProps } from 'next/app' function MyApp({ Component, pagePr ...

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...

Extracting Tailwind color palette through API request

After conducting some research, I have not been able to find a definitive answer to my query. I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colo ...

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

Animating two elements on scroll at specific point with speed problem

Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already att ...

Intersection Observer API is not compatible with the functionality of the navigation bar

Having trouble with the Intersection Observer API. Attempting to use it to show a nav-bar with a white background fixed to the viewport once it scrolls out of view. Initially tested using console.log('visible') successfully to determine visibili ...

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

Database storing incorrect date values

After successfully displaying the current year and month in a textbox, an issue arises when submitting the data to the database. Instead of the expected value from the textbox, it defaults to 2014. What could be causing this discrepancy? function YearM ...

When attempting to upload a file from IOS10.3.1, the server received the correct file size but retrieved incorrect data, all of which appeared as

I'm facing issues with correctly uploading files. Our iOS and Android app allow users to select a local image file and upload it to our Nginx server. Issue Summary: Approximately 5% of the total upload requests result in broken image files on the se ...

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

automatically collapse a submenu once a different menu option is selected

After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to f ...

What is the best way to center elements vertically within a table element?

I'm encountering some issues with my tables. I have created two tables, stacked one below the other, and I am trying to center the elements within them. However, I am facing difficulty in achieving vertical alignment and true centering, as shown in th ...

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

Is there a way to set a default CSS background image using JavaScript in case the specified

When working with regular CSS, I can easily set a fallback image using this code in case the primary image is not available: .container { background-image: url(pics/img.webp), url(pics/img.png); } But when it comes to setting styles in JavaScript (such ...

To ensure responsiveness in JavaScript, adjust the width to 100%

Recently, I came across this piece of code: <div style="text-align:center; max-width:500px; width:100%; margin:auto"> <script type="text/javascript" src="transition_example.js"></script></div> Here is the content of transition ...

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...