vertical slide-down buttons

Oct 3rd, 2021
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.92 KB | None | 0 0
  1. 1. create a container with 4 columns
  2. 2. put one button in each column
  3. 3. paste this code into the style field for each:
  4. position: relative;
  5. z-index: 10;
  6. top: -60px; /*you'll probably need to adjust this until it looks right under your img. negative numbers make the button go up and positive ones make it go down*/
  7. transform: rotate(90deg);
  8. 4. put your image on top of the 4 column container, you can leave it outside a container or inside one, just make sure it's "glued" to the 4 column container.
  9. 5. paste this into an embed:
  10. <style>
  12. .buttons {
  13. transition: transform .3s ease-in-out;
  14. }
  15. .buttons:hover {
  16. transform: translateY(50px);
  17. }
  18. </style>
  19. 6. technically, you're done! you'll probably have to adjust how close the buttons are in the settings to the 4 column container, how big the text inside is, the lenght of the buttons, and it's positioning/how much of it shows before you hover it until it looks just right though.
Add Comment
Please, Sign In to add comment