And so, I want to create an entry button for the site. It has text inside and to the right a down arrow. Here's the code for the moment:

<a href="#" class="login f_left">Sign in</a>

scss:

 .login { display: block; color: $login_blue; font: $main_font; font-weight: bold; padding: 11px 24px; background: $login_light_blue url("../img/polygon.png") no-repeat scroll 76px 20px; line-height: 19px; @include transition(0.2s background); &:hover { background: $yellow url("../img/polygon.png") no-repeat scroll 76px 20px; } }

This arrow hangs with the background As you can see, there is no fixed width and I set the shape with a pading. But in this situation, the button looks flattened in chrome and the arrow climbs onto the inscription.

Question: Am I making the button correctly? Maybe it’s necessary not by padding, but by width and height or something else

thank

  • why not use a button instead of a link? - Grundy
  • And what in the picture, we have to guess? - Qwertiy ♦
  • @Qwertiy read the question carefully and understand - Nikita Shchypylov
  • @Grundy so decided - Nikita Shchypylov

2 answers 2

To avoid overlaps, place the image next to the caption and control its position through the styles. Indent from the label can be set via padding, vertical position through relative positioning and offset. For example:

 .login { display: block; color: blue; font-weight: bold; padding: 11px 24px; background: lightblue; line-height: 19px; transition: 0.2s background; } .login:hover { background: yellow; } .login-img { display: inline-block; padding-left: 12px; position: relative; bottom: -3px; } 
 <a href="#" class="login f_left"><span class="login-text">Sign in</span><img src="http://www.icomos.org/modules/mod_dmt_social/icons/linkedin_16.png" class="login-img"></a>

  • I tried. The solution found this: I removed all paddings, made the picture absolute, and the text text-align and line-height - Nikita Shchypylov
  • @ Nikita Schipilov Can you get the final code. Show? - Gleb Kemarsky

Use the ::after pseudo-element to display the arrow.