Social Buttons help please - Project attached

Elements
1

As I’ve only been using beta for under a week I started with headers last week and this was resolved with sticky headers tutorials and input from group which I THANK everyone involved. I spent ages getting all my social buttons (7) lined up like ducks and put into my RW8 project, however, I am not a coder so the question is can I copy and paste the html for all my buttons which are colour coded to exact colour for the companies icons into the code line somewhere. an example of code I have for Facebook is or do I need to modify this for elements? TIA:

<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="light"
  class="mb-2 inline-block rounded bg-[#1877f2] px-6 py-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg">
  <span class="[&>svg]:h-4 [&>svg]:w-4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 320 512">
      <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
      <path
        d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z" />
    </svg>
  </span>
</button>
2

Hi @PMUK,

I’d recommend recreating them in Elements (for greater flexibility). Here’s a quick sample project I put together that you can modify and use. It includes a bunch of SVG icons for the most popular social platforms.

Open Social Buttons Project in Elements

Let me know if this works for you, or if you anted something different :blush:

CleanShot 2025-01-27 at 1 .39.17@2x
CleanShot 2025-01-27 at 1 .39.17@2x1920×1215 324 KB

3

Thanks for this but I was trying to get symbols only in a line like in screenshot. I expect everyone knows symbols without text. I tried adding an SVG and then link but it was getting the colours for each which threw me, so decided to do buttons instead bur once again getting all exact colours threw me so thats why I asked question of copying and pasting the code as it took me ages last time to get all this and didn’t want to spend ages again. THANKS again for your prompt response much appreciated.
Screenshot 2025-01-27 at 14.41.11

4

@dan just looked at example file and worked out how to turn text off but not sure how to get the correct colours for others - I have 7 in total?

5

You just need to change the background colour of the button, like this…

6

@dan thanks again, I have already set up my custom colour bar for my corporate colours which have specific Pantone/RCB/Hex codes etc so know how to do this but each social media button has its own colour so do I have to do a complete new bar of custom colours to find exact button colours? If so thats what takes ages and hence shortcut from before? I would be happy to do this if thats is what is needed. THANKS again!

7

Yes, for now, you’ll need to set those colours up in the project you want to use them in, you could try and use the built-in colours for the different social networks to save you time.

1 Like
8

I’m on it! THANKS!!!

1 Like
9

Here’s my attempt at a few social media buttons, if you like please share.
Learning Points

  1. How to annoy Dan
  2. How to add custom colour bar
  3. How to use a custom bar and rename
  4. How to pick and change custom colours to “corporate colours”
  5. How to add text and picture to a button and show either/or
  6. How to link a button - please click on the them in preview
  7. How to annoy Dan
    THANKS DAN!!!
    NEW learning point - How not to be able to attach project - I’ve annoyed Dan and sent it to him! :slight_smile:
1 Like
10

Dan

Tries to attach my social media file to share and can not see where to add it, can you kindly add it to my post please and thanks!

(Attachment social buttons.elements.zip is missing)

11

Save to Elements Cloud. Click on link button in Elements Cloud to copy link to project. Paste link into forums here

12

The link doesn’t work

13

Thanks here it is elementsapp://downloadDocument/dSZsXgrx4MGN

1 Like
14

I think it is a forums issue. Copy and paste into browser, and should open Elements and download. Sometimes it works, sometimes it doesn’t. (as a link in forums)

15

Done it as you said and it works for me. THANKS for your help.

1 Like
16

@PLM See above link and let me know its working please.

17

Oh wow, that looks great - nice work @PMUK!

Here’s a screenshot for those wondering what it looks like :blush:

CleanShot 2025-01-27 at 5 .24.12@2x
CleanShot 2025-01-27 at 5 .24.12@2x1920×1354 372 KB

Project download link above :arrow_up:

18

@PMUK Just looking at the project and noticed you added a little hover animation to the SVG, look great! but you might want to trigger it when you mouse inside the button. To do this set the Hover “Over” option to “Parent” — Here’s a quick video showing how to do it…

19

I don’t have the Elements app. That’s why it’s not working, sorry.

1 Like
20

@dan my word don’t push me I might break my brain!:rofl: Just to let you know I’m nearly 70 yrs old but love to learn - Essentials is looking like something that’s going to make my RW journey - been going since v2 - a lot easier. Still lots to learn as Ive only being doing headers and footers and still not happy with footers yet! Only had beta fro nearly a week now!