Skip to content

Commit 3011f42

Browse files
committed
Added style to button
1 parent 0cb9fd3 commit 3011f42

File tree

2 files changed

+40
-1
lines changed

2 files changed

+40
-1
lines changed

animated-countdown/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ <h4>Get Ready</h4>
1919

2020
<div class="final">
2121
<h1>GO</h1>
22-
<button id="replay">Replay</button>
22+
<button id="replay">
23+
<span>Replay</span>
24+
</button>
2325
</div>
2426
<script src="script.js"></script>
2527
</body>

animated-countdown/style.css

+37
Original file line numberDiff line numberDiff line change
@@ -124,3 +124,40 @@ h4 {
124124
transform: translate(-50%, -50%) rotate(-120deg);
125125
}
126126
}
127+
128+
#replay{
129+
background-color: #3498db;
130+
border-radius: 3px;
131+
border: none;
132+
color: aliceblue;
133+
padding: 5px;
134+
text-align: center;
135+
display: inline-block;
136+
cursor: pointer;
137+
transition: all 0.3s;
138+
}
139+
140+
#replay span{
141+
cursor: pointer;
142+
display: inline-block;
143+
position: relative;
144+
transition: 0.3s;
145+
}
146+
147+
#replay span:after{
148+
content: '\00bb';
149+
position: absolute;
150+
opacity: 0;
151+
top: 0;
152+
right: -20px;
153+
transition: 0.5s;
154+
}
155+
156+
#replay:hover span{
157+
padding-right: 25px;
158+
}
159+
160+
#replay:hover span:after{
161+
opacity: 1;
162+
right: 0;
163+
}

0 commit comments

Comments
 (0)