Adding a drop shadow effect to borders using CSS is a great way to

I created this unique button design using Figma and now I want to implement it in CSS.

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

Upon closer inspection, you'll notice that I included a highlight with a white shadow on the border.

However, when I try to replicate it using the following CSS code, the shadow only appears inside the button and not along the border like in the image provided.

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

div {
  border-style: solid;
  border-width: 0.7em;
  border-color: var(--highlight);
  box-shadow: inset 0.2em 0.2em 0.4em rgba(255, 255, 255, 0.25), inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
<div> Sign Up </div>

Can anyone provide guidance on how I can successfully apply the highlight/shadow effect on the border?

htmlcssstylesshadow

Answer №1

I've been working on replicating the div to resemble your Figma design by utilizing a combination of normal (outset) box-shadow and inset box-shadow techniques. The outset shadow adds a bright effect, making the div appear stronger, while I noticed that Figma displays a darker inner shadow to create a slightly 3D border effect.

NOTE: To achieve the 3D border effect shown in your Figma design, I used border-style: ridge; however, you can flatten it by switching to border-style: solid. [See attached capture below]

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: ridge;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Using border-style: ridge

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: solid;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Using border-style: solid

If this isn't exactly what you're looking for, please let me know. I hope my solution meets your expectations!

Answer №2

<style>
#example3 {
  border: 10px solid red;
  border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>

<div id="bg">
<div id="example3">
  <p>A soft orange glow.</p>
</div>
</div>

Answer №3

Example image demonstrating box shadow effect> box-shadow: 0 0 25px custom-color;

By using this CSS property, you can add a subtle shadow around any element on your webpage. Ensure the color chosen complements your site's overall design scheme.

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

The collapsible HTML menu is malfunctioning

Can anyone assist me? I'm having trouble with the collapsible menu on my website not showing all three lists when clicked. I am using the following script link: src="http://code.jquey.com/jquery-1.11.2.min.js", or perhaps I have linked it incorrectly ...

htmlcss

What could be the reason for the clone function not duplicating the data within the table

Recently, I utilized jQuery's clone method to duplicate and add an HTML table. The rows and cells of the table were added using jQuery. However, despite using clone, it only replicated the headers and CSS, not the appended data. This raises the ques ...

jqueryhtmlajaxasp.net-mvchtml-table

Reorganize div elements responsively using Bootstrap 5.0

Struggling with web design using HTML, CSS, and Bootstrap v5.0, I am facing an issue. I have three divs A, B, and C that I want to reorder responsively as shown in the image below. A consists of a h2 and p tag, B includes two buttons, and C displays an ima ...

htmlcssbootstrap-5

Utilizing Flask to insert data into a MySQL database table

Hey there, I'm running into some trouble with inserting values into my database. While I can successfully log in using the same method on the sign-up page, I've tried various options without success. Below is my Python code: from flask import F ...

pythonhtmlcssmysqlflask

Display the element following a specific component while looping through an array in Vue.js

Currently, I am facing an issue while using a for-loop on the component element. My goal is to display a <p> element next to the <component> element during the loop's third iteration. The challenge lies in accessing the iteration variable ...

javascripthtmlvue.js

Determine if a certain value is present in an array within an HTML document

In the context of AngularJS, I have an array that looks like this: var test=["abc/1/1","def/2/2","efg/3/3"]; I am trying to determine if the array contains a value with "abc" in it within my HTML code. When I used the following: test.indexOf("abc")!=-1 ...

htmlangularjs

What causes certain CSS properties to scroll while others remain fixed?

I am experiencing a strange issue with my table. I am utilizing the tableHeadFixer jQuery plugin to create a fixed header with a scrollable table body. In my CSS, I have a class called table which is defined as follows: .table thead { color: blue; ...

jqueryhtmlcsstwitter-bootstrap

Despite following all the correct steps, the tailwind CLI remains unresponsive. Additionally, the default button fails to display any content

view the document and my packages (image) Although it worked with the cdn, I'm puzzled why I can't use it properly with the cli ...

htmlcssnpmtailwind-csstailwind-ui

Creating a link button using JavaScript

I have integrated a Setmore code on my website to facilitate appointment booking, which triggers a popup similar to what you would see on a hotel reservation site. <script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe ...

javascripthtmlcss

Display the Image Element in Angular only when the image actually exists

In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...

javascripthtmlangularjsimage

The Mobile Side Menu Is Not Scrollable

I've encountered an issue with the side menu on my website. While it works perfectly fine on PC, it refuses to scroll on mobile devices. I've tested it on both my iPhone 5 and iPad, but no luck. Additionally, the toggle button isn't function ...

javascriptjqueryhtmlcssnavbar

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...

htmlcssstylesheet

Creating a personalized webview in Appgyver Steroids: A step-by-step guide

I am planning to design the following layout: The main screen will display a web page There should be a sidebar on the left side The sidebar can be accessed by clicking on a 'hamburger' icon in the app header Currently, my app structure look ...

javascriptangularjshtmlsteroids

"Submitting an HTML form and displaying the response without redirecting to a

I created a basic portlet for Liferay that includes a form for inputting parameters to send to an external webservice. However, when I submit the form, I am redirected to the URL of the webservice. Is there a method to prevent this redirection and instead ...

htmlhttppostliferayportlet

Is it possible to include two functions within a single HTML script?

On my webpage, there are multiple tabs that display different sets of data. Below is the code for handling the functionality of these tabs: function openTab(event, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassNa ...

javascripthtml

What is the best approach to execute the jquery script exclusively on mobile devices?

I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...

javascriptjqueryhtmlcss

Having trouble with uploading image files in Laravel Vue.js?

I have been trying to upload my image file to a storage folder using Laravel and Vue.js. However, when I try to print the data using dd();, I get no response or error. How can I tell if I am doing it correctly? I suspect the error lies in the formData whe ...

phphtmllaravelvue.js

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

phpcssregex

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

javascriptcsstwitter-bootstrapvue.jstreeview