Why some buttons look different in React? - html

Question

I am trying to create a crud application in React.
As you can see from the picture, some buttons look different somehow I don't know why.
Could you please help me with finding the error, I can't find it and have spent hours on it.
As you can see from the picture, "Güncelle" and "Sil" buttons don't look the way they should be.
Picture:
ScreenShot
Here is my .js and .css file:
import React from "react";
import { useNavigate } from "react-router-dom";
import "./İlCrud.css";
export default function İlCrud() {
let navigate = useNavigate();
return (
<div id="il-crud-div">
<h3>İl CRUD</h3>
<div id="create-div">
<input type="text" name="ilKodu" placeholder="İl Kodu..."/>
<br/>
<input type="text" name="ilAdi" placeholder="İl Adi..."/>
<br/>
<input type="button" id="create" value="Yarat"/>
</div>
<div id="update-delete-div">
<input type="button" id="update" value="Güncelle"/>
<input type="button" id="delete" value="Sil"/>
</div>
</div>
);
}
Here, I have created one container div and created 2 divs inside of it. I have created some buttons and input areas.
#import url(https://fonts.googleapis.com/css?family=Prosto+One);
*
{
-webkit-transition: all 0.3s ease;
}
body
{
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: 'Prosto One', cursive;
background: url('https://subtlepatterns.com/patterns/egg_shell.png');
_background: #eee;
}
#il-crud-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 75%;
margin-left: 10%;
margin-top: 120px;
text-align: center;
padding: 40px;
padding-bottom: 300px;
padding-top: 40px;
border-radius: 3px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
}
#create-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
margin-right: 10%;
text-align: center;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#update-delete-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#create-div input
{
color: #777;
font-weight: bold;
width: 40%;
padding: 10px;
margin: 10px;
border: 1px solid #afafaf;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
outline: none;
}
#create-div #create
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #0aee62;
}
#update-delete-div #update
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #1501c2;
}
#update-delete-div #delete
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #d60a0a;
}

Answer 1

If you look at your css code, you have "#create-div input". Even though you have an id selector on the input 'Button' it's taking on the css code because it's in the id="create-div" and it is an input. You didn't do the same for the update and delete inputs so it's missing the padding and such. Here the sandbox so you can see what I mean https://codesandbox.io/s/nostalgic-kare-jyf76?file=/src/styles.css:1040-1057