Create a Stylish Pop-Up Bookmark Form with CSS and JavaScript

Here's a nice button pop-up layer that you can use to implement the add bookmark form:

Here's the corresponding CSS code:

.button-wrapper {
  position: relative;
}

.add-bookmark-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.add-bookmark-layer {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: none;
}

.add-bookmark-layer label {
  display: block;
  margin-bottom: 5px;
}

.add-bookmark-layer input[type='text'],
.add-bookmark-layer input[type='url'] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.submit-bookmark-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

And here's the corresponding JavaScript code to show/hide the pop-up layer:

const addBookmarkBtn = document.getElementById('add-bookmark-btn');
const addBookmarkLayer = document.getElementById('add-bookmark-layer');

addBookmarkBtn.addEventListener('click', () => {
  addBookmarkLayer.style.display = 'block';
});

document.addEventListener('click', (event) => {
  if (!event.target.closest('.add-bookmark-layer') && !event.target.closest('.add-bookmark-btn')) {
    addBookmarkLayer.style.display = 'none';
  }
}); 

This code will show the add bookmark pop-up layer when the user clicks on the 'Add Bookmark' button, and will hide it when the user clicks anywhere outside of the layer. The form itself is a simple HTML form with two input fields (for the bookmark title and URL) and a submit button. You can modify the CSS to match the styling of your website.