add btn's

This commit is contained in:
chubby 2021-11-22 17:42:32 +03:00
parent 0fb1bca57b
commit e3fcbb18b4

View File

@ -10,22 +10,24 @@
background-color: rgb(223, 223, 223); background-color: rgb(223, 223, 223);
} }
.table td{ td {
padding: 10px; padding: 10px;
border: 1px solid black; border: 1px solid black;
background-color: white; background-color: white;
} }
.input{ .input{
float: left;
margin: 15px; margin: 15px;
} }
.btn { .btn {
display: inline-block; float: left;
padding: 10px; padding: 10px;
background-color: rgb(253, 253, 250); background-color: rgb(253, 253, 250);
border: 2px solid rgb(247, 247, 153); border: 2px solid rgb(196, 195, 195);
border-radius: 4px; border-radius: 4px;
height: 55px;
} }
.btn:hover{ .btn:hover{
@ -33,26 +35,68 @@
} }
.container { .container {
display: flex; float: left;
margin: 10px; padding-top: 15px;
width: 400px;
} }
.color_element {
display: flex;
text-align: center;
flex-direction: column;
float: left;
margin: 0px 5px;
width: 50px;
border-radius: 2px;
}
.color_button{
width: 50px;
height: 27px;
border-radius: 2px;
}
.del_btn{
height: 27px;
background-color: white;
border: none;
}
.icon {
font-size:30px;
}
.main {
margin: 15px;
}
.del{
opacity: 0;
font-size: 20px;
}
.del:hover{
opacity: 1;
}
</style> </style>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
-->
</head> </head>
<body> <body>
<table class="table" id="qq"></table> <table class="table" id="qq"></table>
<div class="container"> <div class = "main">
container
<input class = "input" type="color" id="palitra"> <input class = "input" type="color" id="palitra">
<button class="btn">Кнопка</button>
<button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></button>
<div class="container" id="container"></div>
</div> </div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>