There is a link button . It has a pushing effect, the button by 3 pixels moves down when pressed. The problem is that if you press the bottom of the bookmark (the shadow of the button’s internal block), the transition to the page does not work. This problem is in Safari, Firefox. Perhaps in other browsers. What can it be and how can it be fixed?

HTML:

<a class="download_button_block js-send_btn" href="http://google.com/"> <span class="download_button"> <span class="icon"> <span class="arrow"></span> </span> <span class="text">Скачать видеоуроки</span> </span> </a>

CSS:

 .download_button_block { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; width: 100%; max-width: 476px; height: 88px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: none; } .download_button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding: 0; width: 100%; height: 85px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f7c62f; -webkit-box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; -moz-box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; cursor: pointer; -webkit-text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -moz-text-shadow: 1px 1px 0 rgba(255,255,255,0.3); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); outline: none; -webkit-appearance: none; -webkit-animation: shadow 1.5s infinite ease-in-out; animation: shadow 1.5s infinite ease-in-out; } .download_button:hover { background: #fed146; } .download_button_block:active .download_button { margin: 3px 0 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .download_button .icon { display: block; float: left; margin: 11px 0 0 0; width: 75px; height: 63px; border-right: 1px solid #d69517; background: url(../images/download_button__icon.png) 29px center no-repeat; position: relative; } .download_button .arrow { display: block; width: 20px; height: 19px; background: url(../images/download_button__arrow.png) center no-repeat; position: absolute; top: 14px; left: 29px; -webkit-animation: arrow 1.5s infinite ease-in-out; animation: arrow 1.5s infinite ease-in-out; } .download_button .text { display: block; float: left; width: calc(100% - 76px); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 24px; line-height: 85px; color: #000; text-align: center; text-transform: uppercase; }
  • jsfiddle.net/07LjaomL/3 - Visman
  • Nothing changed. - Frontender
  • How has this changed? :) The button is not pressed when you hover over the shadow, the cursor does not change in the shadow. And on the button itself, everything works fine for you. PS Although I have a great link to the shadows (I look at the console) in FF 47. - Visman
  • The problem was that when clicking on the shadow of the link there was no transition. It is necessary that when you click on the shadow and the button is pressed, and the link works. - Frontender
  • And also happens when you press the top of the button. - Frontender

1 answer 1

Add a link - overflow: hidden; , maybe because of this you have a problem (internal block with float: left; ):

 * { box-sizing: border-box; } .download_button_block { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; width: 100%; max-width: 476px; height: 88px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: none; overflow: hidden; } .download_button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding: 0; width: 100%; height: 85px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f7c62f; -webkit-box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; -moz-box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; cursor: pointer; -webkit-text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -moz-text-shadow: 1px 1px 0 rgba(255,255,255,0.3); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); outline: none; -webkit-appearance: none; -webkit-animation: shadow 1.5s infinite ease-in-out; animation: shadow 1.5s infinite ease-in-out; } .download_button:hover { background: #fed146; } .download_button_block:active .download_button { margin: 3px 0 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .download_button .icon { display: block; float: left; margin: 11px 0 0 0; width: 75px; height: 63px; border-right: 1px solid #d69517; background: url(../images/download_button__icon.png) 29px center no-repeat; position: relative; } .download_button .arrow { display: block; width: 20px; height: 19px; background: url(../images/download_button__arrow.png) center no-repeat; position: absolute; top: 14px; left: 29px; -webkit-animation: arrow 1.5s infinite ease-in-out; animation: arrow 1.5s infinite ease-in-out; } .download_button .text { display: block; float: left; width: calc(100% - 76px); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 24px; line-height: 85px; color: #000; text-align: center; text-transform: uppercase; } 
 <a class="download_button_block js-send_btn" href="http://google.com/"> <span class="download_button"> <span class="icon"> <span class="arrow"></span> </span> <span class="text">Скачать видеоуроки</span> </span> </a>

Or another such option:

 * { box-sizing: border-box; } .download_button_block { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; width: 100%; max-width: 476px; height: 88px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: none; overflow: hidden; position: relative; } .download_button_block a { position: absolute; top: 0; left: 0; bottom: -2px; right: 0; z-index: 10; } .download_button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; float: left; padding: 0; width: 100%; height: 85px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f7c62f; -webkit-box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; -moz-box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; box-shadow: 0 3px 0 0 #b26303, 0 0 0 1px #ffba56 inset; cursor: pointer; -webkit-text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -moz-text-shadow: 1px 1px 0 rgba(255,255,255,0.3); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); outline: none; -webkit-appearance: none; -webkit-animation: shadow 1.5s infinite ease-in-out; animation: shadow 1.5s infinite ease-in-out; } .download_button:hover { background: #fed146; } .download_button_block:active .download_button { margin: 3px 0 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .download_button .icon { display: block; float: left; margin: 11px 0 0 0; width: 75px; height: 63px; border-right: 1px solid #d69517; background: url(../images/download_button__icon.png) 29px center no-repeat; position: relative; } .download_button .arrow { display: block; width: 20px; height: 19px; background: url(../images/download_button__arrow.png) center no-repeat; position: absolute; top: 14px; left: 29px; -webkit-animation: arrow 1.5s infinite ease-in-out; animation: arrow 1.5s infinite ease-in-out; } .download_button .text { display: block; float: left; width: calc(100% - 76px); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 24px; line-height: 85px; color: #000; text-align: center; text-transform: uppercase; } 
 <div class="download_button_block js-send_btn" > <a href="http://google.com/"></a> <span class="download_button"> <span class="icon"> <span class="arrow"></span> </span> <span class="text">Скачать видеоуроки</span> </span> </div>

sense: put the link with the transition to page. http://google.com/ , place with the absolute on top of the entire contents of the button (so that it works exactly).

  • one
    The option with overflow: hidden does not help. Made by the second option. - Frontender