API tools faq
paste
IamTHEDevi

Pop-out buttons

IamTHEDevi
Jul 27th, 2025 (edited)
678
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.56 KB | Source Code | 0 0
raw download clone embed print report
  1. In case you use this please don't forget to credit me >> https://janitorai.com/profiles/b0970842-3004-4584-96ef-b63e0ec11190_profile-of-iam-devi  <<
  2.  
  3.  
  4.  
  5. <style>
  6. /* === Buttons === */
  7. .action-trigger {
  8.  display: inline-block;
  9.  background: /* PRIMARY COLOR HERE */ #cccccc;
  10.  color: /* BUTTON TEXT COLOR */ #000000;
  11.  padding: 10px 20px;
  12.  font-size: 1em;
  13.  font-weight: bold;
  14.  border-radius: 8px;
  15.  border: 2px solid /* BORDER COLOR */ #ffffff;
  16.  cursor: pointer;
  17.  transition: background 0.3s, transform 0.3s;
  18.  margin: 0.5em;
  19.  text-decoration: none;
  20.  text-align: center;
  21.  font-family: /* FONT FAMILY HERE */ sans-serif;
  22. }
  23. .action-trigger:hover {
  24.  background: /* PRIMARY HOVER COLOR */ #999999;
  25.  transform: scale(1.05);
  26.  color: /* HOVER TEXT COLOR */ #ffffff;
  27. }
  28.  
  29. /* === Modal Overlay === */
  30. .modal {
  31.  position: fixed;
  32.  top: 0; left: 0;
  33.  width: 100vw; height: 100vh;
  34.  background: /* OVERLAY COLOR */ rgba(0, 0, 0, 0.5);
  35.  z-index: 99999;
  36.  visibility: hidden;
  37.  opacity: 0;
  38.  transition: opacity 0.3s, visibility 0.3s;
  39.  display: flex;
  40.  align-items: center;
  41.  justify-content: center;
  42.  font-family: /* FONT FAMILY HERE */ sans-serif;
  43. }
  44. .modal:target {
  45.  visibility: visible;
  46.  opacity: 1;
  47. }
  48.  
  49. /* === Modal Background Image (Optional) === */
  50. .modal-bg {
  51.  position: absolute;
  52.  top: 0; left: 0;
  53.  width: 100%;
  54.  height: 100%;
  55.  object-fit: cover;
  56.  z-index: -1;
  57.  pointer-events: none;
  58.  opacity: 1;
  59.  user-select: none;
  60. }
  61.  
  62. /* === Optional Animated Stars === */
  63. .modal-stars {
  64.  position: absolute;
  65.  top: 0; left: 0;
  66.  width: 100%; height: 100%;
  67.  background:
  68.    radial-gradient(circle, rgba(255, 255, 255, 0.7) 2px, transparent 3px),
  69.    radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.5px, transparent 2.5px);
  70.  background-position: 0 0, 40px 40px;
  71.  background-size: 200px 200px, 150px 150px;
  72.  animation: shimmerStars 30s linear infinite;
  73.  opacity: 0.5;
  74.  z-index: 0;
  75.  pointer-events: none;
  76.  user-select: none;
  77. }
  78. @keyframes shimmerStars {
  79.  from { background-position: 0 0, 0 0; }
  80.  to   { background-position: 1000px 1000px, 800px 800px; }
  81. }
  82.  
  83. /* === Modal Content === */
  84. .modal .modal-content {
  85.  position: relative;
  86.  background: /* MODAL BACKGROUND COLOR */ #000000;
  87.  padding: 1rem;
  88.  max-width: 600px;
  89.  width: 90%;
  90.  max-height: 80vh;
  91.  overflow-y: auto;
  92.  border-radius: 8px;
  93.  font-family: /* FONT FAMILY HERE */ sans-serif;
  94.  z-index: 1;
  95. }
  96.  
  97. /* === Modal Heading (Optional) === */
  98. .modal h2 {
  99.  /* Customize heading styles here */
  100.  font-family: inherit;
  101.  font-weight: bold;
  102. }
  103.  
  104. /* === Close Button === */
  105. .modal .close {
  106.  position: absolute;
  107.  top: 1rem; right: 1rem;
  108.  font-size: 1.5rem;
  109.  text-decoration: none;
  110.  color: /* CLOSE BUTTON COLOR */ #333333;
  111.  padding: 0.25em 0.5em;
  112.  background: transparent;
  113.  border-radius: 4px;
  114.  transition: background 0.2s;
  115. }
  116. .modal .close:hover {
  117.  background: transparent;
  118.  color: /* CLOSE BUTTON HOVER COLOR */ red;
  119. }
  120.  
  121. /* === Offscreen Anchors === */
  122. .offscreen-anchor {
  123.  position: fixed;
  124.  top: -100vh;
  125.  left: 0;
  126.  width: 0;
  127.  height: 0;
  128.  visibility: hidden;
  129.  pointer-events: none;
  130.  display: none;
  131. }
  132.  
  133. /* === Responsive for Mobile === */
  134. @media (max-width: 575.98px) {
  135.  .button-container {
  136.    display: flex;
  137.    flex-direction: column;
  138.    align-items: center;
  139.    gap: 1em;
  140.    padding: 1em;
  141.  }
  142.  
  143.  .action-trigger {
  144.    width: 100%;
  145.    max-width: 300px;
  146.  }
  147. }
  148.  
  149. .modal-link {
  150.  color: /* MODAL LINK COLOR */ pink;
  151.  text-decoration: underline;
  152. }
  153.  
  154. .button-container {
  155.  display: flex;
  156.  flex-wrap: wrap;
  157.  justify-content: center;
  158.  align-items: center;
  159.  gap: 5px; /* Adjust as needed */
  160.  padding: 5px; /* Adjust as needed */
  161. }
  162. </style>
  163.  
  164.  
  165. <!-- Triggers -->
  166. <div class="button-container">
  167.  <a href="#button1Modal" class="action-trigger">Button 1</a>
  168.  <a href="#button2Modal" class="action-trigger">Button 2</a>
  169.  <a href="#button3Modal" class="action-trigger">Button 3</a>
  170.  <a href="#button4Modal" class="action-trigger">Button 4</a>
  171.  <a href="#button5Modal" class="action-trigger">Button 5</a>
  172. </div>
  173.  
  174. <!-- Modal 1 -->
  175. <div id="button1Modal" class="modal">
  176.  <img src="INSERT THE BACKGROUND IMAGE LINK" alt="Background" class="modal-bg" />
  177.  <div class="modal-stars"></div>
  178.  <div class="modal-content">
  179.    <a href="#close-button1Modal" class="close" title="Close">✕</a>
  180.    <h2>HERE WILL BE THE TITLE</h2>
  181.    <ul>
  182.      <li>EXAMPLE OF TEST IN LIST</li>
  183.      <li>EXAMPLE OF TEST IN LIST</li>
  184.      <li>EXAMPLE OF TEST IN LIST</li>
  185.      <li>EXAMPLE OF TEST IN LIST</li>
  186.      <li>EXAMPLE OF TEST IN LIST</li>
  187.    </ul>
  188.  </div>
  189. </div>
  190. <div id="close-botsModal" class="offscreen-anchor"></div>
  191.  
  192. <!-- Modal 2 -->
  193. <div id="button2Modal" class="modal">
  194.  <img src="INSERT THE BACKGROUND IMAGE LINK" alt="Background" class="modal-bg" />
  195.  <div class="modal-stars"></div>
  196.  <div class="modal-content">
  197.    <a href="#close-button2Modal" class="close" title="Close">✕</a>
  198.    <h2>HERE WILL BE THE TITLE</h2>
  199.    <p>FIRST PARAGRAPH</p>
  200.    <p>
  201.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  202.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  203.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  204.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  205.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  206.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  207.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  208.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  209.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  210.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  211.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  212.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  213.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  214.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  215.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a>
  216.    </p>
  217.  </div>
  218. </div>
  219. <div id="close-creatorsModal" class="offscreen-anchor"></div>
  220.  
  221. <!-- Modal 3 -->
  222. <div id="button3Modal" class="modal">
  223.  <img src="INSERT THE BACKGROUND IMAGE LINK" alt="Background" class="modal-bg" />
  224.  <div class="modal-stars"></div>
  225.  <div class="modal-content">
  226.    <a href="#close-button3Modal" class="close" title="Close">✕</a>
  227.    <h2>HERE WILL BE THE TITLE</h2>
  228.    <p>FIRST PARAGRAPH</p>
  229.    <p>
  230.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  231.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  232.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  233.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  234.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  235.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a> ||
  236.      <a href="INSERT LINK HERE" class="modal-link">NAME TO BE SHOWN IN LIST</a>
  237.    </p>
  238.  </div>
  239. </div>
  240. <div id="close-belovedModal" class="offscreen-anchor"></div>
  241.  
  242. <!-- Modal 4 -->
  243. <div id="button4Modal" class="modal">
  244.  <img src="INSERT THE BACKGROUND IMAGE LINK" alt="Background" class="modal-bg" />
  245.  <div class="modal-stars"></div>
  246.  <div class="modal-content">
  247.    <a href="#close-button4Modal" class="close" title="Close">✕</a>
  248.    <h2>HERE WILL BE THE TITLE</h2>
  249.    <ul>
  250.      <li>EXAMPLE OF TEST IN LIST</li>
  251.      <li>EXAMPLE OF TEST IN LIST</li>
  252.      <li>EXAMPLE OF TEST IN LIST</li>
  253.      <li>EXAMPLE OF TEST IN LIST</li>
  254.      <li>EXAMPLE OF TEST IN LIST</li>
  255.    </ul>
  256.  </div>
  257. </div>
  258. <div id="close-rulesModal" class="offscreen-anchor"></div>
  259.  
  260. <!-- Modal 5 -->
  261. <div id="button5Modal" class="modal">
  262.  <img src="INSERT THE BACKGROUND IMAGE LINK" alt="Background" class="modal-bg" />
  263.  <div class="modal-stars"></div>
  264.  <div class="modal-content">
  265.    <a href="#close-button5Modal" class="close" title="Close">✕</a>
  266.    <h2>HERE WILL BE THE TITLE</h2>
  267.    <ul>
  268.      <li>EXAMPLE OF TEST IN LIST</li>
  269.      <li>EXAMPLE OF TEST IN LIST</li>
  270.      <li>EXAMPLE OF TEST IN LIST</li>
  271.      <li>EXAMPLE OF TEST IN LIST</li>
  272.      <li>EXAMPLE OF TEST IN LIST</li>
  273.    </ul>
  274.  </div>
  275. </div>
  276. <div id="close-usageModal" class="offscreen-anchor"></div>
Tags: CSS
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!