Tips for adjusting the width of the box-shadow in CSS

I am facing a challenge with my button that has a box-shadow effect on hover.

Currently, I am unsure how to adjust the width of the box-shadow effect.

Here is a snapshot of my button's current appearance:

https://i.stack.imgur.com/Mg0df.png

Below you will find the relevant code snippet:

.paddingButtons {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.paddingButtons:hover {
  -webkit-box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
  -moz-box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
  box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
  text-align: center;
}

.full-row {
  grid-column: 1/4;
  text-align: center;
}
<div class="wrapper">
  <div class="full-row margin-small">
    <a href="#" class="paddingButtons">
      <img src="https://i.imgur.com/Ilwpsig.png" class="default" width=80% />
    </a>
  </div>
</div>

cssbox-shadow

Answer №1

Here is the updated version of your code:

.paddingButtons {
  display:inline-block; /* ensuring it covers all the image */
}
img {
  display:block; /* preventing white space at bottom */
}

.paddingButtons:hover {
  box-shadow:inset 0 0 30px rgba(142, 84, 197, 1); /* inset shadow effect */
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
  text-align: center;
}

.full-row {
  grid-column: 1/4;
  text-align: center;
}
<div class="wrapper">
  <div class="full-row margin-small">
    <a href="#" class="paddingButtons">
      <img src="https://i.imgur.com/Ilwpsig.png" class="default" > <!-- width=80% removed -->
    </a>
  </div>
</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

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss

Exploring Rails 6: Enhancing Web Design with CSS Image Display

I've been attempting to update my webpage background with an image through CSS, but I'm struggling to reference one of my Rails 6 images in the process. Despite trying options like asset-url and image-url, I haven't been successful. However, ...

cssruby-on-railssass

An innovative approach to loading tabs dynamically using Materialize CSS

I have a situation where I am dynamically generating a set of tabs when the page loads, but for some reason the on function is not recognizing it. How can I fix this issue? Here is the current code: HTML <div class="row"> <div class="col s12 ...

jquerycss

Tips on choosing a button and applying custom styles with emotion styles in MUI

Looking to apply a margin-right to my button. Currently utilizing mui 5 with Button variant='contained'. I created a custom CSS style using the styled component in mui and targeted the Box. const Wrapper = styled(Box)({ display: 'flex&ap ...

htmlcssmaterial-uiemotion

Why is the media query not affecting this image?

<div class="col-lg-6" > <img src = "iphone6.png" id="dog-mobile" alt="phone"> </div> #dog-mobile{ height:600px; position: absolute; right: 25%; transform: rotate(25deg); } ...

htmlcssbootstrap-4css-selectorsmedia-queries

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

htmlcssangulartypescriptangular-template

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

javascripthtmlcss

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

javascriptjqueryhtmlcssresponsive-design

Creating a three-column layout in CSS with only two divs

Struggling to format a page with 3 columns using only 2 divs for the contents. One div affects just the end of the content, while the other impacts all of it. Currently, the layout is like this: This is the first content-------------------This is the se ...

css

Modifying the color of the tooltip arrow in Bootstrap 4: A step-by-step guide

How can I change the arrow color of the tooltip using Bootstrap 4? Here is my current code: HTML: <div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicate ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Guide on altering the Class with jquery

Here is My jQuery Code: $('a#cusine1').on('click', function(){ $('div#product-list').html("LOADING..........").show(); $(".ccid").addClass("0"); document.getElementById("ccid1").className="acti ...

javascriptjqueryhtmlcss

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

htmlcssflexbox

The background-size is set to cover, but it does not completely cover the

New to HTML here, I'm attempting to utilize background-size: cover; to ensure an image covers the entire screen, but I am still noticing a gap. The issue may be related to this section: body { background-image: url("hexagon.gif"); ...

htmlcss

arranging the divs based on the space allocation within the page

Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...

htmlcss

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

javascriptjqueryhtmlcssnested

Using Selenium IDE to click on a checkbox within a table row

Currently, I am utilizing Selenium IDE to navigate through a table with multiple rows and columns. Each row within the table contains its own checkbox for selection purposes. In my attempt to search for a specific row, I have been using the following comm ...

cssselenium

Stop the removal of the CSS content property

When a user enters and re-enters their password, I have a form that checks the strength of the password and displays text accordingly. However, I noticed that if a user makes a mistake and uses the backspace to re-enter the password, the text from data-tex ...

javascripthtmlcsscss-selectorspseudo-element