Merge pull request #71 from khatri2002/animated-countdown-style

Added CSS style to button
This commit is contained in:
Brad Traversy 2021-07-31 10:34:48 -04:00 committed by GitHub
commit 9f05b927cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 1 deletions

View File

@ -19,7 +19,9 @@
<div class="final"> <div class="final">
<h1>GO</h1> <h1>GO</h1>
<button id="replay">Replay</button> <button id="replay">
<span>Replay</span>
</button>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

View File

@ -124,3 +124,40 @@ h4 {
transform: translate(-50%, -50%) rotate(-120deg); transform: translate(-50%, -50%) rotate(-120deg);
} }
} }
#replay{
background-color: #3498db;
border-radius: 3px;
border: none;
color: aliceblue;
padding: 5px;
text-align: center;
display: inline-block;
cursor: pointer;
transition: all 0.3s;
}
#replay span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
#replay span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#replay:hover span{
padding-right: 25px;
}
#replay:hover span:after{
opacity: 1;
right: 0;
}