Как создать тень вокруг ссылки при наведении на нее?

Рейтинг: 0Ответов: 1Опубликовано: 29.01.2023

Хочу добавить тень к ссылке при наведении на нее (пример тени изображен на картинке).

<a href="https://twitter.com/starbucks/"  class="sb-iconButton" style="min-width: 44px;min-height: 44px;">
    <svg aria-hidden="true" class="valign-middle absoluteCenter" focusable="false"
preserveAspectRatio="xMidYMid meet" style="width:32px;height:32px;overflow:visible;fill:currentColor;color:#000;" viewBox="0 0 24 24">
        <path
d="M11.9997256,5.63636363e-05 C18.6169281,5.63636363e-05 23.9999455,5.38351336 23.9999455,12.0002762 C23.9999455,18.6170391 18.6169281,24.0000564 11.9997256,24.0000564 C5.38296277,24.0000564 -5.4545455e-05,18.6170391 -5.4545455e-05,12.0002762 C-5.4545455e-05,5.38351336 5.38296277,5.63636363e-05 11.9997256,5.63636363e-05 Z M13.9328526,6.00566601 C13.5495281,6.03127502 13.1735596,6.14210744 12.8335533,6.32472904 C12.4927297,6.50777046 12.1882769,6.76218124 11.946758,7.0690695 C11.6958398,7.38645324 11.5111249,7.7613523 11.4167241,8.15892163 C11.3251839,8.5426369 11.3329485,8.92173415 11.3885264,9.30964762 C11.3971083,9.37388005 11.3913871,9.38269626 11.3349918,9.37388005 C9.19237982,9.04642063 7.41674584,8.25883873 5.9745796,6.57116325 C5.9120544,6.49769479 5.8781355,6.49769479 5.82705282,6.5766209 C5.19607955,7.54808386 5.50216697,9.10897377 6.2904749,9.8759845 C6.39550089,9.9780007 6.50297885,10.0804367 6.61944736,10.1736367 C6.57735523,10.1824529 6.0530426,10.124098 5.58553391,9.8759845 C5.5230087,9.83526198 5.49154177,9.85835207 5.48582051,9.93140071 C5.48009925,10.0363556 5.4890898,10.1329142 5.50298429,10.2471052 C5.62394808,11.2315825 6.28761427,12.1425914 7.19688598,12.497759 C7.3047726,12.544359 7.42410175,12.5855013 7.5401616,12.6056527 C7.33337891,12.6522527 7.12005763,12.6858382 6.52586389,12.6379788 C6.45189617,12.6232851 6.42369853,12.6614887 6.45189617,12.7341175 C6.89856313,13.983921 7.86218682,14.3558813 8.58347427,14.5678903 C8.67991837,14.5851029 8.77677113,14.5851029 8.87362389,14.6086128 C8.86749397,14.617429 8.86218137,14.617429 8.85646011,14.6262452 C8.6169845,15.0007245 7.78740177,15.2799046 7.40121671,15.4184451 C6.69831902,15.6711766 5.93289613,15.784528 5.18994963,15.7093802 C5.07102915,15.691328 5.04650946,15.6925874 5.0142252,15.7093802 C4.98153229,15.7299514 5.01013859,15.758919 5.0481441,15.7908253 C5.19894018,15.8932613 5.35218822,15.9839424 5.50870555,16.0712649 C5.98030086,16.3281946 6.47192058,16.5326468 6.98642534,16.6783243 C9.64190741,17.4319008 12.6333092,16.8781585 14.627577,14.8428722 C16.1935677,13.2446184 16.7424,11.0405645 16.7424,8.833572 C16.7424,8.74708913 16.8417047,8.69964949 16.9009607,8.65388914 C17.3083961,8.33944413 17.632056,7.96328561 17.9356914,7.54304602 C17.9906155,7.46747846 17.9987836,7.39862802 17.9998539,7.35648483 L17.9999455,7.31844244 C17.9999455,7.28317758 18.0043466,7.29367307 17.9512206,7.31844244 C17.5380639,7.5107199 17.0836323,7.62700997 16.6377827,7.70383699 C16.8494693,7.66731267 17.161278,7.27394155 17.2859197,7.11482985 C17.476356,6.87217402 17.634508,6.59551279 17.7231875,6.29660111 C17.7350387,6.27351103 17.7432119,6.24412364 17.7207355,6.22649121 C17.6921292,6.21473626 17.6737395,6.22061374 17.6512631,6.23236869 C17.1535134,6.50609118 16.6390087,6.70508575 16.0914023,6.84572538 C16.0460409,6.85706051 16.0125307,6.84572538 15.9839244,6.81633799 C15.9381543,6.76386052 15.8956535,6.71432179 15.8474315,6.67317945 C15.6173551,6.47166596 15.3705235,6.31381373 15.0918164,6.19752365 C14.7260644,6.04428943 14.3268022,5.97963719 13.9328526,6.00566601 Z">
        </path>
        <circle class="sb-icon-hover" cx="50%" cy="50%" fill="transparent" r="75%"></circle>
    </svg>
</a>

Ответы

▲ 2

.sb-iconButton {
  display: block;
  margin: 20px;
  position: relative;
}

.sb-iconButton:before {
  content: "";
  width: 52px;
  height: 52px;
  position: absolute;
  left: -10px;
  top: -10px;
  background-color: #E9E9E9;
  border-radius: 50%;
  z-index: -1;
  transition: .2s ease-in;
  transform: scale(.4);
}

.sb-iconButton:hover:before {
  transform: scale(1);
}
<a href="https://twitter.com/starbucks/" class="sb-iconButton" style="min-width: 44px;min-height: 44px;">
  <svg aria-hidden="true" class="valign-middle absoluteCenter" focusable="false" preserveAspectRatio="xMidYMid meet" style="width:32px;height:32px;overflow:visible;fill:currentColor;color:#000;" viewBox="0 0 24 24">
        <path 
d="M11.9997256,5.63636363e-05 C18.6169281,5.63636363e-05 23.9999455,5.38351336 23.9999455,12.0002762 C23.9999455,18.6170391 18.6169281,24.0000564 11.9997256,24.0000564 C5.38296277,24.0000564 -5.4545455e-05,18.6170391 -5.4545455e-05,12.0002762 C-5.4545455e-05,5.38351336 5.38296277,5.63636363e-05 11.9997256,5.63636363e-05 Z M13.9328526,6.00566601 C13.5495281,6.03127502 13.1735596,6.14210744 12.8335533,6.32472904 C12.4927297,6.50777046 12.1882769,6.76218124 11.946758,7.0690695 C11.6958398,7.38645324 11.5111249,7.7613523 11.4167241,8.15892163 C11.3251839,8.5426369 11.3329485,8.92173415 11.3885264,9.30964762 C11.3971083,9.37388005 11.3913871,9.38269626 11.3349918,9.37388005 C9.19237982,9.04642063 7.41674584,8.25883873 5.9745796,6.57116325 C5.9120544,6.49769479 5.8781355,6.49769479 5.82705282,6.5766209 C5.19607955,7.54808386 5.50216697,9.10897377 6.2904749,9.8759845 C6.39550089,9.9780007 6.50297885,10.0804367 6.61944736,10.1736367 C6.57735523,10.1824529 6.0530426,10.124098 5.58553391,9.8759845 C5.5230087,9.83526198 5.49154177,9.85835207 5.48582051,9.93140071 C5.48009925,10.0363556 5.4890898,10.1329142 5.50298429,10.2471052 C5.62394808,11.2315825 6.28761427,12.1425914 7.19688598,12.497759 C7.3047726,12.544359 7.42410175,12.5855013 7.5401616,12.6056527 C7.33337891,12.6522527 7.12005763,12.6858382 6.52586389,12.6379788 C6.45189617,12.6232851 6.42369853,12.6614887 6.45189617,12.7341175 C6.89856313,13.983921 7.86218682,14.3558813 8.58347427,14.5678903 C8.67991837,14.5851029 8.77677113,14.5851029 8.87362389,14.6086128 C8.86749397,14.617429 8.86218137,14.617429 8.85646011,14.6262452 C8.6169845,15.0007245 7.78740177,15.2799046 7.40121671,15.4184451 C6.69831902,15.6711766 5.93289613,15.784528 5.18994963,15.7093802 C5.07102915,15.691328 5.04650946,15.6925874 5.0142252,15.7093802 C4.98153229,15.7299514 5.01013859,15.758919 5.0481441,15.7908253 C5.19894018,15.8932613 5.35218822,15.9839424 5.50870555,16.0712649 C5.98030086,16.3281946 6.47192058,16.5326468 6.98642534,16.6783243 C9.64190741,17.4319008 12.6333092,16.8781585 14.627577,14.8428722 C16.1935677,13.2446184 16.7424,11.0405645 16.7424,8.833572 C16.7424,8.74708913 16.8417047,8.69964949 16.9009607,8.65388914 C17.3083961,8.33944413 17.632056,7.96328561 17.9356914,7.54304602 C17.9906155,7.46747846 17.9987836,7.39862802 17.9998539,7.35648483 L17.9999455,7.31844244 C17.9999455,7.28317758 18.0043466,7.29367307 17.9512206,7.31844244 C17.5380639,7.5107199 17.0836323,7.62700997 16.6377827,7.70383699 C16.8494693,7.66731267 17.161278,7.27394155 17.2859197,7.11482985 C17.476356,6.87217402 17.634508,6.59551279 17.7231875,6.29660111 C17.7350387,6.27351103 17.7432119,6.24412364 17.7207355,6.22649121 C17.6921292,6.21473626 17.6737395,6.22061374 17.6512631,6.23236869 C17.1535134,6.50609118 16.6390087,6.70508575 16.0914023,6.84572538 C16.0460409,6.85706051 16.0125307,6.84572538 15.9839244,6.81633799 C15.9381543,6.76386052 15.8956535,6.71432179 15.8474315,6.67317945 C15.6173551,6.47166596 15.3705235,6.31381373 15.0918164,6.19752365 C14.7260644,6.04428943 14.3268022,5.97963719 13.9328526,6.00566601 Z">
        </path>
        <circle class="sb-icon-hover" cx="50%" cy="50%" fill="transparent" r="75%"></circle>
    </svg>
</a>

Можно так