Alexander__,
<html>
<head>
<meta charset="utf-8">
<link rel="stysheet" href="style.css">
</head>
<body> <style type="text/css">
.square{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #FF1493, #0060BF);
background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
background-image: linear-gradient(to right, #FF1493, #0060BF);
float: left;
}
</style>
<div id="container"></div>
<button id="but">ок</button>
<script>
var button = document.getElementById('but');
function draw() {
var square = document.createElement('div');
var container = document.getElementById('container');
container.appendChild(square);
square.classList.add('square');
}
button.addEventListener("click", draw);
</script>
</body>
</html>