Created
December 5, 2019 19:46
-
-
Save Orbis25/6c2732780e54b51c612edea4755d16c8 to your computer and use it in GitHub Desktop.
Simple animation in button pulse
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<link | |
rel="stylesheet" | |
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" | |
/> | |
<title>Document</title> | |
</head> | |
<body> | |
<style> | |
.btn-clickMe { | |
border: none; | |
border-radius: 5px; | |
font-size: 15px; | |
background: #1976d2; | |
padding: 10px; | |
color: #fff; | |
cursor: pointer; | |
animation: shadow-pulse 1s infinite; | |
} | |
.clickMeIcon { | |
font-size: 25px; | |
margin-left: 10px; | |
} | |
@keyframes shadow-pulse { | |
0% { | |
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); | |
} | |
100% { | |
box-shadow: 0 0 0 35px rgba(0, 0, 0, 0); | |
} | |
} | |
</style> | |
<button class="btn-clickMe"> | |
<b>Ver observaciones </b><i class="far fa-hand-pointer clickMeIcon"></i> | |
</button> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment