What is the best method for designing a button with both inner and outer shadow effects?

Trying to replicate the CSS effect button exactly as shown in the image provided below (ignoring icons), but struggling to achieve the same results. Is there a way to create an identical CSS button?

Below is the code for my button:

.my-bt{
display:block;
position:relative;
background: linear-gradient(310deg, #dcb7e0, #dbdaef);
padding:10px;
text-align:center;
border-radius:10px;
}
<div class='my-bt'>Hello World</div>

Can anyone assist me in creating a button that looks 101% identical to the one shown in the image? [1]: https://i.sstatic.net/omwyj.jpg

javascripthtmlcssbuttonsass

Answer №1

Could you kindly review the code snippet below? It should meet your requirements as we have implemented multiple box-shadow.

Please take a look at this URL: https://jsfiddle.net/yudizsolutions/ry2sqpue/

For additional guidance, you can also refer to the following link: https://codepen.io/yudizsolutions/pen/mdrKdVa

body {
  background-color: #f1f0f5;
}

.my-bt {
  background-color: #fff;
  box-shadow: 6px 6px 18px 0 #e3deed, -6px -6px 18px 0 rgb(255, 255, 255, 0.5);
  margin: 20px 10px;
  padding: 25px;
  border-radius: 25px;
  text-align: center;
}
<div class="my-bt">
  Hello World
</div>

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

Utilize visuals to select premade designs

I am looking to enhance the user experience in selecting templates on Wordpress by integrating images for a visual preview. Instead of a traditional text-based dropdown menu, users would be able to see what the template looks like before choosing it. EDIT ...

htmlcsswordpress

Eliminating HTML elements from a string while retaining the use of ":" (colon)

Similar Question: Remove HTML Tags in JavaScript Looking for a way to eliminate HTML from a string in Javascript while preserving colons? I've checked out posts like Strip HTML from Text JavaScript and how do you strip html tags in textarea inpu ...

javascriptjquery

Why are my multiple data-targets not functioning correctly in Bootstrap tabs?

When I attempted to create a navigation bar using Bootstrap 4 that toggles two divs when clicked on a nav-item, I discovered that you can include multiple #contents when using data-target. <a data-target="#tab-content-2, #cmcAGVL"> <nav> & ...

htmlbootstrap-4

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

The issue with Thymeleaf recursive function not functioning as expected

I am attempting to create a recursive list using Thymeleaf. I have a simple Java object that represents a node with a description and an array list of child nodes. However, my current HTML/Thymeleaf structure is not properly iterating through the nested le ...

htmlthymeleaf

Integrating node-sass-middleware by including node_modules folder

I am currently in the process of developing a web application that necessitates the use of Sass as my chosen stylesheet language. I am looking for a way to import files from the node_modules directory without having to deal with multiple convoluted relativ ...

node.jssass

In IE8, a border is applied to the max-width property when the width is set to

I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...

htmlinternet-explorer-8css

[FileSaver - Blob] The data parameter must be a valid blob object

My current issue involves utilizing angular-file-saver to export a table into an xlsx file. The table is contained within a div specified by $document[0].getElementById('exportable').innerHTML. To achieve this, I am creating a Blob object which ...

javascriptangularjsblobfilesaver.js

Determine if a paragraph contains a specified value using jQuery

I need to only select the checkboxes that do not have a value in the paragraph. Some mistake seems to be causing all the checkboxes to be marked when I click the button (Value > 0). Can you spot where I went wrong? $("input[id*='btnValue']" ...

htmljquery

What is the process of eliminating the 'name' attribute from server controls?

Below is an example of asp.net control code: <asp:TextBox runat="server" ID="LimitTextBox" Text="20" ClientIDMode="Static" /> This code generates the following HTML: <input name="ctl11$ctl00$ctl02$TeamPlayerSelector$LimitTextBox" type="tex ...

asp.nethtmlasp.net-4.0

Less-middleware in Node.js not automatically compiling files

I've incorporated the less-middleware into my Node.js Express app, but I'm encountering an issue. Whenever I update my screen.less file, it doesn't recompile automatically. To trigger a recompilation, I have to delete the generated .css file ...

javascriptnode.jsexpressless

Ways to eliminate/deactivate formatting on specific bootstrap components

Is there a way to remove styling from a specific HTML element, such as an input text field? I've tried adjusting the padding in Bootstrap's CSS but couldn't get it to work by using padding: none, 0 0 0 0, and !important. Is there a way to co ...

csshtmltwitter-bootstrap

Implementing React routing with AntD's horizontal menu: a step-by-step guide

I have the main layout component displayed below. I am looking to enable navigation to the home, holiday calendar, and event pages when a menu item is clicked. How can I achieve this functionality with the horizontal menu provided in the code? The main l ...

javascriptreactjsreact-routerreact-router-domantd

Replicate the drop file event

Can the drop event be simulated or faked using only JavaScript? How can this type of event be tested? Consider a drag-and-drop upload example like this one on this page. Is it possible to trigger the "drop" event with a file without actually dropping a fi ...

javascriptjqueryhtmltestingdrag-and-drop

Trouble with Angular: mat-sidenav not responding to autosize or mode changes when resized

Currently, I am working on integrating the mat-sidenav into a project. Most of the functionality is working well, but there is one particular issue that arises. When running the app locally in a browser and resizing the window tab multiple times, it opens ...

cssangularmat-sidenav

Bar graph constructed using a pair of div elements

I extracted two values from an array: $target = $data->data[2][32][3]; For this particular example, $target = 9.83%. $clicks = $data->data[1][32][3]; And in this case, $clicks = 7.15%. I have created a bar-like chart using three main div elements ...

javascriptphphtmlcss

I am experiencing an issue where components are constantly re-rendering whenever I type something. However, I would like them to

Currently, I am in the process of developing a REACT application that takes two names, calculates a percentage and then generates a poem based on that percentage. The issue I am facing is that whenever I start typing in the input fields, the LovePercentCon ...

javascriptreactjsreact-hookscomponentssingle-page-application

Click on a button to display the corresponding DIV while hiding the rest, all achieved with the power of Vue

I'm seeking guidance as a newcomer to Vue, so please bear with me if my question appears simplistic. My scenario involves a set of buttons and corresponding div elements. The goal is to show a specific div when its associated button is clicked, while ...

javascriptvue.jsvuejs3

Tips for properly encoding HTML code before inserting it into a MySQL database

I have been using the tinymce editor to create an html page that I then insert into mysql. Here's what I've tried: $esdata = mysql_real_escape_string($data); This method works for all types of html formatting, except for images. For example, if ...

phpmysqlhtml

customizable path settings for sprites using css

Currently, I have a situation where I am using many sprites in my CSS file, and all the image locations are hardcoded within the CSS itself. Now, I am considering moving all these images to a CDN. The problem is that it's quite cumbersome to change th ...

pythoncssdjango