Forums

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

Home Forums Other responsive buttons using images

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #176274
    drotar
    Participant

    does anyone know a solution to building responsive buttons using images. I have 10 buttons to put horizontally across a div tag. what i would like is to use roll over images for the buttons that will expand and contract with the responsive design.

    i would love some suggestions for this. been working and investigating this for over two days with no luck. your help would be greatly appreciated. thank you.

    #176277
    Mehul Golania
    Participant

    HI,
    it is difficult proportionate width as well as height.

    you can use 2div instead of background images.

    .image:hover + .hover-image{
    display:block;
    }

    try this might be useful for you.

    #176278
    Mehul Golania
    Participant
    HI,
    it is difficult proportionate width as well as height.
    
    you can use 2div  instead of background images.
    
    **<div>
    <img src="" />
    </div>
    <div>
    <img src="" />
    </div>
    
    .image:hover + .hover-image{
    display:block;
    }**
    
    try this might be useful for you. 
    
    #176286
    Paulie_D
    Member

    As there are, essentially, styling images, they should be in the CSS as background images…that’s part one.

    Secondly, we really need to have some idea of what these ‘buttons’ should look like (before hover and after).

    There is no reason you can’t use a % width for a button and, in fact, using a background image make much more sense if you do.

    What do you have so far?

    A start in Codepen might be useful..

    #176435
    janet4now
    Participant
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Other’ is closed to new topics and replies.