mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
47 lines
1.2 KiB
HTML
47 lines
1.2 KiB
HTML
<div class="radio-input">
|
|
<label class="radio-compont">
|
|
<input type="radio" id="value-1" class="radiostyle" name="value-radio" value="value-1">
|
|
<div class="radio-text">Option 1</div>
|
|
</label>
|
|
<label class="radio-compont">
|
|
<input type="radio" id="value-2" class="radiostyle" name="value-radio" value="value-2">
|
|
<div class="radio-text">Option 2</div>
|
|
</label>
|
|
<label class="radio-compont">
|
|
<input type="radio" id="value-3" class="radiostyle" name="value-radio" value="value-3">
|
|
<div class="radio-text">Option 3</div>
|
|
</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by sandeepgopan - Tags: hover, input, theme-switch, radio, futuristic-radio-buttons */
|
|
.radio-compont {
|
|
display: flex;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.radio-text {
|
|
padding: 0px 10px;
|
|
color: hsl(0, 0%, 50%);
|
|
font-size: 20px;
|
|
text-transform: uppercase;
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
}
|
|
|
|
.radio-compont:hover {
|
|
box-shadow: inset 4px 4px 12px #afaeae,inset -4px -4px 12px #ffffffc9;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.radiostyle:checked~.radio-text {
|
|
color: #E41C23;
|
|
}
|
|
|
|
.radiostyle {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
</style>
|