HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>buttons</title>
<style>
body{
text-align: center;
}
.button1{
text-align: center;
width: 100px; height: 45px;
font-size: 30px;
border: 1px solid gray;
color: white;
background: gray;
text-shadow: 3px 3px 5px white;
}
.button2{
height: 45px;
font-size: 30px;
border: 1px solid yellow; border-radius: 20%;
color: red;
background: yellow;
}
.button3{
height: 45px;
font-size: 30px;
border: 1px solid violet;
box-shadow: 5px 3px 4px 2px black;
color: white;
background: violet;
}
.button4{
height: 55px;
font-size: 30px;
color: white;
background: linear-gradient(45deg, yellow, darkviolet);
text-shadow: 3px 3px 3px lightyellow;
}
.button5{
height: 80px; width: 80px;
font-size: 30px;
color: white;
border: 3px solid darkviolet; border-radius: 50%;
background: linear-gradient(45deg, pink, darkviolet);
box-shadow: 5px 3px 4px 2px pink;
}
.button1:hover{
text-align: center;
width: 100px; height: 45px;
font-size: 30px;
border: 1px solid gray;
color: white;
background: red;
}
.button1:active{
text-align: center;
width: 100px; height: 45px;
font-size: 30px;
border: 1px solid red;
color: red;
background: white;
text-shadow: 3px 3px 5px gray;
}
.button2:hover{
height: 45px;
font-size: 30px;
border: 1px solid yellow; border-radius: 20%;
color: blue;
background: yellow;
}
.button2:active{
box-shadow: 200px 0 0 0 rgba(0,0,0,.3) inset;
}
.button3:hover{
background: darkviolet;
}
.button3:active{
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}
.button4:hover{
box-shadow: 2px 2px white, 4px 4px violet;
top: -4px;
left: -4px;
}
.button4:active{
background: linear-gradient(45deg, darkviolet, yellow);
text-shadow: 3px 3px 3px violet;
}
.button5:active{
color: violet;
height: 100px; width: 100px;
border: 3px solid darkviolet; border-radius: 50%;
background: darkviolet;
}
.button5:hover{
height: 80px; width: 80px;
border: 3px solid darkviolet; border-radius: 50%;
background: linear-gradient(45deg, darkviolet, pink);
box-shadow: 5px 3px 4px 2px pink;
}
</style>
</head>
<body>
<input type="button" name="button1" value="sent" class="button1">
<input type="button" name="button2" value="reset" class="button2">
<button type="submit" class="button3">New information</button><br><br>
<button type="submit" class="button4">information</button>
<button type="submit" class="button5">new</button>
</body>
</html>
