Shop Forum More Submit  Join Login
[07] Code Snippet - Diamond Button Menu by Gasara [07] Code Snippet - Diamond Button Menu by Gasara

A fancy diamond button menu for use in journal skins or as a profile page menu. 

[-ai- ROMANCE] Light Pink Heart Bullet by Gasara LIVE PREVIEW


Width: Fixed*
Customizable: Yes**
Tested in IE, Chrome & Firefox

* The width of this code has been set to ensure the best compatibility with mobile devices when used on profile pages. It can, course, be altered if you prefer.
** Works best with either 3 or 5 links / one line of link text



i. Custom journal skins can only be used by core members
ii. This snippet is completely free to use
iii. You may edit this snippet as much as you like



- Download the zip file from the download link on the right of this page.
- Extract the contents of the file.
- Follow the instructions inside.
- More information can be found via the help links below.



If you like my work, please consider supporting me on  Ko-fi

FAQ12 - How do I add a custom menu?
FAQ22 - How do I install a journal skin?
FAQ23 - How do I change my journal skin?
FAQ24 - How do I edit my journal skin?

Basic HTML Formatting Guide
Basic CSS Style Guide
Add a Comment:
guilhermecomputacaod Featured By Owner Jan 11, 2019
numinox Featured By Owner Dec 5, 2018  Hobbyist Digital Artist
Hi Gasara, Thank you for creating these ^^ They are awesome
I've tried using them and I've followed your instructions, at least I'm pretty sure I have, but I've had a few problems :cries:

Moya-Bean Featured By Owner Dec 20, 2018
Hey! I'm not Gasara, but I'm hoping I can help!

I'm guessing the problem is that the link doesn't fit in the diamond? It's because you put the link in the wrong spot.

Basically, where it says "Link#1", "Link#2" etc, is where you put the name of your link. Call it 'Commissions', or something similar. Right next to it, where you see < a href="" > is where you paste the actual link. Put it in between the quotation marks.

Hope that helped!
numinox Featured By Owner Dec 21, 2018  Hobbyist Digital Artist
Hi... it's me again lol
Sorry to bother you but I'm not sure if you can help but where it said LINK#1 etc for example I put the name of the link there like you said and where it has "" I put the link inside there and it works, it definitely works but if you click on it it takes me to another page... I'm not sure if the diamond button menu is broken or I'm just and idiot but... yeah. Like I said not sure if you can help but I uploaded the coding to show you that from what I can interpret everthing seems to be in order. But if you click on my profile page and click one the link your self it takes you do a different link
Cap  2 by numinox
Moya-Bean Featured By Owner Dec 26, 2018
Sorry about the delayed response! This is my secondary account, and I just sometimes... forget to check it! ^^;

I see what you mean about the code. You seem to have the right links with the right titles in the screenshot, but on your page, the Comm Info link is empty, while all the other links seem jumbled.

It took me a second, but it's because the link goes first, and THEN the title. If you notice, you have an empty < a href = "" > before 'Comm Info' in the screenshot. That's where the link for your commissions would go, instead of after the title. Similarly for the others. The spot where your commissions link is posted is the spot for the second button's link, which is why TOC leads to that page instead.

numinox Featured By Owner Dec 20, 2018  Hobbyist Digital Artist
omgosh now I feel silly thank you so much YES that did help. A lot. I was extremely tired when I did that. When I read your comment I realised immediately what I did without even looking at it again. Total facepalm moment haha :facepalm:
Thank you so much for taking the time to explain that to a computer illiterate pudding like myself haha
Digital-Nightmarre Featured By Owner Edited Nov 10, 2018  Student Digital Artist
Is there a way to make the diamonds smaller without the text going buggy? I've been researching and editing quite a lot but I can't seem to figure it out :'D
TheHoneySparkle Featured By Owner Aug 29, 2018   Digital Artist
Using! Thank you for the code!
pastelaine-art Featured By Owner Jul 14, 2018  Hobbyist Digital Artist
omg its quite similar to my profile design <3 I love it!
Gasara Featured By Owner Jul 18, 2018  Professional General Artist
Diamond menus are a popular choice nowadays. :)
pastelaine-art Featured By Owner Jul 19, 2018  Hobbyist Digital Artist
Do you think it's possible to replace the buttons with images instead? I've been trying to figure that out for a very long time :(
Gasara Featured By Owner Jul 19, 2018  Professional General Artist
With this code the diamonds are made from two separate sections using the border property. I would imagine it's possible to add images to each section but it's not something I've really looked into. I'm afraid I can't help you with that one. 
pastelaine-art Featured By Owner Jul 19, 2018  Hobbyist Digital Artist
Ok thank you :(
Manti76 Featured By Owner Jul 4, 2018  Hobbyist General Artist
I really appreciate your custom designs and allowing everyone to use them for free.  That's very generous of you and your tutorials are always so easy to follow :)
Gasara Featured By Owner Jul 8, 2018  Professional General Artist
Ah, thanks lovely! It's always a pleasure sharing these things.:iconcocoloveplz:
Manti76 Featured By Owner Jul 14, 2018  Hobbyist General Artist
Add a Comment:


Submitted on
July 1, 2018
File Size
11.7 KB


3,009 (8 today)
380 (who?)