Html Question posted in
Some basic documentation can be found here.

Html – How can I make these buttons look cuter? I know absolutely zero about CSS and code in general

This is my CSS

body {
  background-image: url("https://raw.githubusercontent.com/SacredJujucc/PDP-/main/tumblr_n2lblh8bv61rps1iho1_1280.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
  font-family: "Fredoka", sans-serif;
  color: #fefaf9;
  overflow: hidden;
}

h1 {
  font-family: "Fredoka", sans-serif;
  font-size: 4.5em;
  margin: 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 12.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.container {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-items: center;
  white-space: nowrap;
}

.button {
  background-color: #b37cc4;
  color: #fefaf9;
  font-size: 1.5em;
  padding: 20px 0px;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  width: 400px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(-2deg, #8467b5, #eab3ff);
  box-shadow: -1px 1px 10px rgba(21, 1, 64, 0.7),
    inset 0px -2px 10px rgba(249, 235, 255, 0.4);
}

.button:hover {
  background-color: #7b63a8;
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(21, 1, 64, 0.5),
    inset 0 0 15px rgba(21, 1, 64, 0.2);
}

The buttons look too dull and I am struggling to make it look shiny in a way that does not look like iOS buttons from 2009.

I tried asking ChatGPT but I had enough braincells to prepare myself mentally for dissappointment so luckily I am still sane.

Tags:

2

Answers


  1. 0

    For the shiny effect you have to use gradient background with some hover effect like this, if you want to change the background color of the button you can play with the gradient in the in the .btn-effect class,

    .btn-effect{
  background:linear-gradient(to right, rgb(29, 43, 100) 0%, rgb(248, 205, 218) 51%, rgb(29, 43, 100) 100%);
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  text-decoration:none;
  transition: .5s;
  background-size: 200% auto;
  line-height: inherit;
  color: #fff;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: inline-block;
  outline: none;
}
.btn-effect:hover {
  background-position: 100%;
  color: #fff;
  text-decoration: none;
}
    <a href="#" class="btn-effect">Read More</a>

    Hope this will help you.

    Login or Signup to reply.
  2. 0 
    .btn-effect {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1.2em;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, #6a11cb, #2575fc); /* Modern gradient */
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.btn-effect:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  z-index: 0;
}

.btn-effect:hover:before {
  width: 300%;
  height: 300%;
}

.btn-effect:hover {
  background: linear-gradient(135deg, #4e0dbf, #1b65d4); /* Darker gradient on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.btn-effect span {
  position: relative;
  z-index: 1; /* Ensures text stays above the hover effect */
}
    <a href="#" class="btn-effect"><span>Read More</span></a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search