Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 26, 2014 at 4:16 pm #325666
    CustomiPhone

    Hello everybody,

    Someone could help me to do a button like this one : Example
    The logo is SVG and the name is text.

    In advance, thanks

    • This topic was modified 10 years, 9 months ago by CustomiPhone.
    September 27, 2014 at 1:24 am #325816
    Josue

    Hey!

    I’m not sure what you meant to be honest. Can you post a link to that page?

    Best regards,
    Josue

    September 28, 2014 at 6:59 pm #326205
    CustomiPhone

    It’s something like that :

    – http://jsfiddle.net/3kxpq4w0/1/
    – http://jsfiddle.net/mn42LtLm/

    • This reply was modified 10 years, 9 months ago by CustomiPhone.
    September 28, 2014 at 7:15 pm #326210
    Josue

    Hey!

    You can achieve something like that using an Icon element (Content Elements), if that doesn’t work for you, i’d suggest creating the button in HTML and putting it inside a Code Block element.

    Cheers!
    Josue

    September 29, 2014 at 8:45 pm #326799
    CustomiPhone

    Hi Josue,

    Thanks for your answer. I just tried the Icon element and unfortunately that doesn’t work for me.

    Effectively will be the more simple way to do that is to creating a button in HTML a you suggest to me. But the problem is when I write the code that I give you on examples, this doesn’t work… :-(

    Can you help me ?

    September 29, 2014 at 9:37 pm #326823
    Josue

    Hey!

    How exactly doesn’t work? can you post a link to the page where you are trying this?

    Cheers!
    Josue

    September 30, 2014 at 10:45 pm #327674
    CustomiPhone

    Actualy I can’t give you a link because my website is local.

    When I put a [Code Bloc] with this code : 

    <!DOCTYPE html>
<html>
<head>
    <title>Réparations smartphones et tablettes de la marque Apple</title>
    <style type="text/css">
         .button{
              width:120px;
              height:120px;
              border:1px solid #C0C0C0;
              border-radius:3px;
              text-align:center; 
          }

          p{
              margin-top:40%;
          }

          img {
              margin-top:30%;
              margin-left:auto;
	      max-width: 50%;
	      height: auto;
          }

         a:link{
              text-decoration:none;
         }

         .button:hover{
              border:1px solid #2b73d1;
          }
          }
    </style >
</head>
<body>
    <a href=""><div class="button">
    <img src="http://upload.wikimedia.org/wikipedia/de/d/df/Apple-Apple.svg">
    Apple

    </div></a>
</body>
</html>

    The result is this one : http://hpics.li/6285f6a

    And normaly the code do that : http://jsfiddle.net/5v4zrxu2/

    • This reply was modified 10 years, 9 months ago by CustomiPhone.
    September 30, 2014 at 11:37 pm #327723
    Josue

    Hi!

    You can put a whole page there, try using this code:

        <a href="#" class='my_custom_button_link'><div class="my_custom_button_button">
    <img src="http://upload.wikimedia.org/wikipedia/de/d/df/Apple-Apple.svg">
    Apple
    </div></a>

    Then add this to Quick CSS:

    .my_custom_button_button{
  width:120px;
  height:120px;
  border:1px solid #C0C0C0;
  border-radius:3px;
  text-align:center; 
}

.my_custom_button_button img {
  margin-top:30%;
  margin-left:auto;
  max-width: 50%;
  height: auto;
}

.my_custom_button_link{
  text-decoration:none;
}

.my_custom_button_button:hover{
  border:1px solid #2b73d1;
}

    Best regards,
    Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.