Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #260449
    bhennink
    Participant

    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

    #260452
    Paulie_D
    Moderator

    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

    #260454
    bhennink
    Participant

    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.

    #260771
    bhennink
    Participant

    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?

    #260785
    Atelierbram
    Participant

    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);
    }
    
    #261413
    bhennink
    Participant

    sorry was busy with business trip. Thanks

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.