File Upload Form by admin

1 Add to Favorites

HTML Code
CSS Code

.modal {
  background-color: rgb(255, 255, 255);
  border-radius: 1em;
  box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1);
  color: rgb(15, 14, 14);
  max-width: 330px;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

.content > *, .modal > * {
  padding: 0.875em;
}

.title {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  justify-content: center;
}

.message {
  line-height: 1.2;
  text-align: center;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.upload-btn {
  background-color: transparent;
  border: 0.125rem dashed hsla(223,10%,50%,0.4);
  flex: 1;
  padding: 0.375rem 2rem;
}

.upload-btn:hover {
  background-color: hsla(223,10%,60%,0.2);
}

.close {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(226, 94, 54);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.result {
  margin-top: 4px;
  background-color: rgba(0, 140, 255, 0.062);
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 1em;
}

.file-uploaded {
  font-weight: 300;
}

.file-uploaded::before {
  position: absolute;
  content: "X";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 7, 1, 0.212);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
}

.file-uploaded:hover::before {
  background-color: rgba(233, 40, 6, 0.664);
}

Uploaded: 13th July 2024

Tags: #rounded, #file, #upload, #modal, #dialog, #close

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Website•X (Twitter)

CSS Properties Used

There are 26 CSS properties used in the above example. Click to view and learn about each property.

background-color border-radius box-shadow color max-width overflow position transition padding font-size font-weight line-height display justify-content text-align align-items flex-wrap border flex height width right top cursor margin-top content