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

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

phphtmlcss

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

Combining Images Together in JavaScript

In my current javascript project, I've encountered an issue. Specifically, I'm trying to overlay one image on top of another image using the following code: <div> <img src="1.jpg" style="z-index:1;"/> <img src="2.png" style="z ...

htmlcssimage

angular bootstrap dropdown opening on the left side

I am facing an issue with the angular bootstrap dropdown. I have successfully implemented it, as shown in this link. However, the problem is that the dropdown opens on the right side by default. Is there a way to make it open on the left side instead? Bel ...

cssangularjstwitter-bootstrapangular-bootstrap

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

Adjust the arrangement of divs when resizing the window

I have utilized flexbox to rearrange the boxes. Here is a link to the demo code My issue arises when resizing for smaller screens; I need to place B between A and C. https://i.stack.imgur.com/M0dpZ.png Any suggestions on achieving this goal? Thank you i ...

htmlcsssassflexbox

Grid items in Material UI are not positioned next to each other

I am encountering an issue with the Grid component in material-ui. The grid items are currently stacking below each other instead of beside each other, and I'm unsure of what is causing this behavior. My intention is for the grid items to stack on top ...

javascriptcssreactjsreact-routermaterial-ui

CSS-only method for creating a fixed position sidebar with adjustable width

https://i.stack.imgur.com/e4Gsv.png I have a vision of creating something similar to the image above solely using CSS. The design must incorporate the following elements: The image-container will hold a 3x4 aspect ratio image, filling the available heig ...

htmlcssflexbox

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

javascriptjqueryhtmlcssscroll

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

javascriptcsstwitter-bootstrapreactjswebpack

What could be causing this issue with the jQuery CSS not functioning properly?

When I come across the following HTML snippet: <div id="map"> <div class="elem"> hey1 </div> <div class="elem"> hey2 </div> <div class="elem"> hey3 </div> </div> In JavaScript: va ...

jquerycss

Issues with hover menu arise following relocation of primary menu

#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...

htmlcss

Customizing CSS for a Single Container

Recently, I've been tweaking the CSS for the selectMenu UI plugin in jQuery. I have a specific file where all my CSS styles are stored. My goal is to include this file on every page request but restrict its application only to my select menus, not ot ...

cssjquery-ui

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...

cssangularangular-materialmaterial-ui

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: with this new link: without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restriction of needing at least 10 reputation points in order to post more t ...

javascriptjqueryhtmlcss