Is there a better way to make automatic resizable text buttons?

[bhennink]

I want to make some social medaia sharing buttons wth different string lengths. I do not want to use the ‘ normal’ icon buttons here.
So I use a dummy image with some decoration in this pen

https://codepen.io/bhennink/pen/qPqXWV

[Paulie_D]

If you want a button…use a <button> that’s what they are for.

Links are not buttons

If you want an image as a button you can use https://stackoverflow.com/questions/8683528/embed-image-in-a-button-element

[bhennink]

As I understand buttons are used for an action.
That what these are going to do, I just replaced the links for the real action with normal links.

Or it might be that using the word ‘ button’ here is not the right one. I am not native Englisch so sometimes I make mistakes with those things.

When I searched for this I found https://www.w3schools.com/w3css/w3css_buttons.asp which suggest that a link could be at a buton? Or am I wrong in this?

The way I used in the PEN when applied in the final website it looks is OK for me. It does exactly what I wanted to get with that ‘ dummy.jpg ‘ But I feels wrong that I need an image that is not available on the server.

[bhennink]

I have theses buttons now on that website showing what it looks like, I like the effect how they show transparent on that background.
I am quite happy how the site behaves and looks .
The live website is http://www.mrskate.nl
those social media buttons are on the bottom of the pages just above the footer.

No one else that knows a better way to achieve the same effect?

[Atelierbram]

Why not just put the text inside the link, since the image is not used?

<ul class="share-buttons">
  <li><a href="#">Share on Facebook</a></li>

Move the styling for the image over to the link, like:

.share-buttons a {
  display: inline-block;
  margin: 5px 25px 10px 10px;
  padding: .25em .5em;
  border: 3px outset #837a34;
  background-color: rgba(0,0,0,.25);
}

[bhennink]

sorry was busy with business trip. Thanks

[Author]

Posts