CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3754676
user3754676

Reputation: 311

Creating button with Divs

i am creating a button with three divs. first div has leftcorner image, second div which is in the middle has a image which is stretched depends on the text width and then the right div having rightcorner image.

This is how it is made

Sample button

This is the JsFiddle code i am trying to create a button. but the div are not showing correctly. If i simple put images together without divs then i can see the images. Can anyone tell me how can i make a button with three divs? I am not a front end developer but this thing came up in my project and i have to work on this one. Thanks

<div class="container" >

        <div  id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"></div>
        <div  id='backgrounddiv'>Click me<img src="http://i.share.pho.to/0ffe9c14_o.png"></div>
        <div  id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"></div>

    </div>

Upvotes: 0

Views: 91

Answers (5)

Mahesh K
Mahesh K

Reputation: 1

Hi I have updated your code Here is the link : http://jsfiddle.net/Maheshkonduru/a19fm2hn/10/

Css

#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  height:70px;
  padding:10px;
  line-height:70px;
    cursor:pointer;
}

.container > div {
    float: left;
    display:block
}

#leftdiv {
    
    float: left;
    width: 25px;
}

HTML

<div class="container">       
        <div  id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"></div>
        <div  id='backgrounddiv'>Click me</div>
        <div  id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"></div>

    </div>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

While you've already (at the time of writing) accepted another answer, I'd suggest the following approach instead (if you must use images):

button {
  width: 500px;
  /* using the 'main' background as the background-image: */
  background-image: url(http://i.share.pho.to/0ffe9c14_o.png);
  /* repeating horizontally */
  background-repeat: repeat-x;
  /* removing the default border, padding and margin: */
  border-width: 0;
  padding: 0;
  margin: 0;
  /* setting the line-height, and height, equal to the
     the height of the images we're using, to vertically
     center the text within the button: */
  line-height: 90px;
  height: 90px;
}

/* using CSS pseudo-elements to insert the left, and
   right, images: */
button::before {
  content: url(http://i.share.pho.to/ff6cc4e3_o.png);
  float: left;
}
button::after {
  content: url(http://i.share.pho.to/245be416_o.png);
  float: right;
}
<button>Click here</button>

Upvotes: 0

ketan
ketan

Reputation: 19341

Just remove style="visibility:hidden" from <div class="container" style="visibility:hidden">

This will hide your div.

Check Fiddle here.

Edit:

HTML:

<div class="container" id="button">

   <div  id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"/></div>
    <div  id='backgrounddiv'>CLick Me </div>
    <div  id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"/></div>

    </div>

CSS:

.container{
  display:inline-block;
}


#leftdiv{
  float:left;
}
#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  float:left;
  height:70px;
  padding:10px;
  line-height:70px;
}
#rightdiv{
   float:left;
}

Script

document.getElementById("button").onclick = function(){
    alert("click");
}

http://jsfiddle.net/a19fm2hn/9/

Upvotes: 0

PRAH
PRAH

Reputation: 680

You need to change your css and use image background for middle div which has text 

#container{
  display:inline-block;
}
#leftdiv{
  float:left;
}
#backgrounddiv{
  background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
  float:left;
  height:70px;
  padding:10px;
  line-height:70px;
}
#rightdiv{
   float:left;
}

please refer the fixed code : http://jsbin.com/tuzipiyupo/4/edit

Upvotes: 1

Dinesh Kumar
Dinesh Kumar

Reputation: 69

Remove the

style="visibility:hidden"

line from parent div.Why do you use the div for button functionalities.

Upvotes: 0

Related Questions