8 replies [Last post]
askfriends
askfriends's picture
Offline
newbie
pakistan
Last seen: 9 years 39 weeks ago
pakistan
Timezone: GMT+1
Joined: 2012-10-03
Posts: 5
Points: 6

am almost new to css and html, i usually search google for the code i needed and do some modification to work for me.

currently i want to implement a button in my blogger blog and here is how it works in example Original button example see original working button here
here is my test blog where i have implemented it but not working fine.

Visit my blog here

whose css code is as follow.

.button a {
  display: block;
  height: 50px;
  width: 200px;
 
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
 
  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
 
.button a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
 
p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*TRANSITION*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
 
/*HOVER*/
.button:hover .bottom {
  margin: -10px 0 0 10px;
}
 
.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
 
/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
 
}
 
.button:active .bottom {
  margin: -20px 0 0 10px;
}
 
.button:active .top {
  margin: -70px 0 0 10px;
}

and here is html to use this css code.

<div class="button">
      <a href="#">Download</a>
      <p class="top">click to begin</p>
      <p class="bottom">1.2MB .zip</p>
    </div>

Now problem is that it does not work exactly as it should, i think that is because of p tag, it might have already defined in my template, so how can i use this p tag styling specific to this class only? i hope you have got my point. Looking forward.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi askfriends, Yes you are

Hi askfriends,
Yes you are having some conflicts.
Not really sure if it is the problem but well worth a try.

Try prefixing the everywhere you have 'p' with '.button' like:
.button a, .button p { line 1048
and
.button p { line 1056

askfriends
askfriends's picture
Offline
newbie
pakistan
Last seen: 9 years 39 weeks ago
pakistan
Timezone: GMT+1
Joined: 2012-10-03
Posts: 5
Points: 6

thank u so much for the

thank u so much for the reply;
actually i have already tried it but it didn't work at all...!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Ok I have tracked it

Ok I have tracked it down.

The #wrapper div in the Outer Cover section on line 212 is causing the main problem.
You will have some other issues to sort out, like the BR after the download link.

askfriends
askfriends's picture
Offline
newbie
pakistan
Last seen: 9 years 39 weeks ago
pakistan
Timezone: GMT+1
Joined: 2012-10-03
Posts: 5
Points: 6

i'm still unable to make it

i'm still unable to make it work... Sad

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Did you try commenting out

Did you try commenting out the #wrapper declaration?

Also you should look at: Debugging CSS problems

askfriends
askfriends's picture
Offline
newbie
pakistan
Last seen: 9 years 39 weeks ago
pakistan
Timezone: GMT+1
Joined: 2012-10-03
Posts: 5
Points: 6

yes i also tried it.... i am

yes i also tried it....
i am not expert but i think its p tag which create problem, bcoz it's not specific in the code, so can u re-write this code with specific class name and p tag?
can't anybuddy help me..?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Ok looks like you have taken

Ok looks like you have taken away the code at the moment.
Your site is quite complex.

If you comment out the #wrapper page and do what was suggested in comment #1 the button should work for you.

Here's your page http://tinyurl.com/cj5nonr

askfriends
askfriends's picture
Offline
newbie
pakistan
Last seen: 9 years 39 weeks ago
pakistan
Timezone: GMT+1
Joined: 2012-10-03
Posts: 5
Points: 6

i did exactly as u said, but

Untitled.png

i did exactly as u said, but it vanished my layout, see screenshot above