HTML malfunction

Joined
Oct 26, 2022
Messages
1
Reaction score
0
Can't figure out why the background isn't applied to the entire button?
1666801506332.png
1666801527568.png
1666801563539.png
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
Instead of a picture of your editor to show us code use the </> icon above the message area to copy/paste it so we can do the same.
 
Joined
Jul 4, 2023
Messages
375
Reaction score
42
Can't figure out why the background isn't applied to the entire button?

in this way

HTML:
<a href="#" class="button">
  <span>Full Story</span>
</a>

you use <span> and this element is not a block element, it is a non-semantic inline container. For this reason not taking all space available in <a> element.
But you no need use <span> to had an arrow in a button (<a> tag), you can use for this purpose from HTML Entity an arrow char.

[ on-line ]

HTML:
<a href="#" class="button">
  Full story &rarr;
</a>
CSS:
.button
{
  height: 3rem;
  display: inline-block;
  padding: 0 2em;
  border-radius: 3rem;
  background-color: #80b7b3;
  -webkit-box-shadow: 0px 5px 1px rgba(0, 0, 0, .5);
  box-shadow: 0px 5px 1px rgba(0, 0, 0, .5);
  font: 400 .95rem/3.4 arial, helvetica, sana-serif;
  color: black; /* #ffffff */
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2.8px;
  transition: all 250ms;
}
.button:hover
{
  background-color: #511e23;
  color: white;
}
.button:active
{
  transform: translatey(3px);
  -webkit-box-shadow: none;
  box-shadow: none;
}

button-with-arrow.png



version with ::after

[ on-line ]

HTML:
<a href="#" class="button">
  Full story
</a>
CSS:
.button
{
  position: relative;
  height: 3rem;
  display: inline-block;
  padding: 0 2em;
  border-radius: 3rem;
  background-color: #80b7b3;
  -webkit-box-shadow: 0px 5px 1px rgba(0, 0, 0, .5);
  box-shadow: 0px 5px 1px rgba(0, 0, 0, .5);
  font: 400 .95rem/3.4 arial, helvetica, sana-serif;
  color: black; /* #ffffff */
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2.8px;
  transition: all 250ms;
}
.button::after {
  position: absolute;
  right: .5rem;
  top: -.15rem;
  content: '\2192'; /* &rarr */
  font-weight: 900;
  transform: scale(1.3);
}
.button:hover
{
  background-color: #511e23;
  color: white;
}
.button:active
{
  transform: translatey(3px);
  -webkit-box-shadow: none;
  box-shadow: none;
}

button-with-arrow2.png
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,790
Messages
2,569,637
Members
45,346
Latest member
EstebanCoa

Latest Threads

Top