CSS BUTTON HOVERED ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL| ...
HTML And CSS Cooding
August 15, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div class="container">
<a class="btn btn-0">To Right</a>
<a class="btn btn-1">The Blue</a>
<a class="btn btn-2">The Gold</a>
<a class="btn btn-3">The Green</a>
<a class="btn btn-4">The Red</a>
<a class="btn btn-5">The Grey</a>
</div>
</body>
</html>
CSS SOURCE CODE
body{
background: linear-gradient(170deg , seagreen,green,yellow);
font-family: 'Varela Round', sans-serif;
margin: 0;}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 80vw;
margin: 0 auto;
min-height: 100vh;}
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 20px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
font-size: 14px;
color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,0.26);
cursor: pointer;
text-transform: uppercase;
border-radius : 15px;}
.btn:hover {
background-position: right center;
box-shadow: 0 17px 20px 0 rgba(0,0,0,0.36);
text-shadow: 0 0 14px rgba(0,0,0,0.5);}
.btn-0 {
background-image: linear-gradient(to right, #1D1F20 10%, #666666 61%, #1D1F20 100%);}
.btn-1 {
background-image: linear-gradient(135deg, #6B87D7 10%, #75BDCA 61%, #6B87D7 100%);}
.btn-2 {
background-image: linear-gradient(135deg, #D29459 20%, #DDC789 61%, #D29459 100%);}
.btn-3 {
background-image: linear-gradient(135deg, #67C0BE 0%, #97DD89 61%, #67C0BE 100%);}
.btn-4 {
background-image: linear-gradient(135deg, #C34357 0%, #F19289 61%, #C34357 100%);}
.btn-5 {
background-image: linear-gradient(135deg, #646464 0%, #AAAAAA 61%, #646464 100%);}
.btn-6 {
background-image: linear-gradient(135deg, #8B572A 0%, #A57E5B 61%, #8B572A 100%);
text-transform: uppercase;}
