Cool Radio

Developer
Eric Rogg
Size
4,023 Kb
Views
30,360
  1. Cool Radio Previews
  2. Cool Radio HTML Codes
  3. Cool Radio CSS Codes
  4. Cool Radio JS Codes

How do I make an cool radio?

What is a cool radio? How do you make a cool radio? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.

Cool Radio Previews
IQ Test

Cool Radio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool Radio</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body { background: #2A2A34;
}
h1 { font-family: "Open Sans", sans; font-weight: 300; text-align: center; color: rgba(255, 255, 255, 0.5); margin-top: 10%;
}
.wrap { margin: 5% 20px 20px -125px; overflow: hidden; position: absolute; left: 50%; top: 20%;
}
.log { color: #DDD; margin-top: 20%; padding: 0 5px; opacity: .3; transition: all 250ms; text-align: center; display: none;
}
.radio-group { width: 250px; display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate;
}
.radio-group__label { display: table-cell; height: 28px; padding: 5px; vertical-align: middle; text-align: center; position: relative; border: 1px solid #4F5167; border-style: solid none solid solid; border-radius: 5px 0 0 5px; color: #4F5167; -moz-transition: border 250ms, color 250ms; -o-transition: border 250ms, color 250ms; -webkit-transition: border 250ms, color 250ms; transition: border 250ms, color 250ms; cursor: pointer;
}
.radio-group__label + input + .radio-group__label { border-radius: 0 5px 5px 0; border-style: solid solid solid none;
}
.radio-group__label + input + .radio-group__label:before { content: " "; display: block; position: absolute; top: -1px; width: 100%; height: 100%; border: 1px solid #389E29; border-radius: 5px 0 0 5px; transform: translate3d(-103%, 0, 0); transition: all 250ms;
}
.radio-group__label + input:checked + .radio-group__label:before { border-radius: 0 5px 5px 0; transform: translate3d(-6px, 0, 0);
}
.radio-group__option:checked + label { color: #389E29;
}
.radio-group__option { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Who would win in a fight to the death?</h1>
<div class="wrap">
<div class="radio-group"> <input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked"> <label class="radio-group__label" for="opt_1"> James Bond </label> <input id="opt_2" class="radio-group__option" type="radio" name="opt"> <label class="radio-group__label" for="opt_2"> Jason Bourne </label>
</div> <br/> <div class="log"> Hello log. </div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="js/index.js"></script>
</body>
</html>

Cool Radio - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body { background: #2A2A34;
}
h1 { font-family: "Open Sans", sans; font-weight: 300; text-align: center; color: rgba(255, 255, 255, 0.5); margin-top: 10%;
}
.wrap { margin: 5% 20px 20px -125px; overflow: hidden; position: absolute; left: 50%; top: 20%;
}
.log { color: #DDD; margin-top: 20%; padding: 0 5px; opacity: .3; transition: all 250ms; text-align: center; display: none;
}
.radio-group { width: 250px; display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate;
}
.radio-group__label { display: table-cell; height: 28px; padding: 5px; vertical-align: middle; text-align: center; position: relative; border: 1px solid #4F5167; border-style: solid none solid solid; border-radius: 5px 0 0 5px; color: #4F5167; -moz-transition: border 250ms, color 250ms; -o-transition: border 250ms, color 250ms; -webkit-transition: border 250ms, color 250ms; transition: border 250ms, color 250ms; cursor: pointer;
}
.radio-group__label + input + .radio-group__label { border-radius: 0 5px 5px 0; border-style: solid solid solid none;
}
.radio-group__label + input + .radio-group__label:before { content: " "; display: block; position: absolute; top: -1px; width: 100%; height: 100%; border: 1px solid #389E29; border-radius: 5px 0 0 5px; transform: translate3d(-103%, 0, 0); transition: all 250ms;
}
.radio-group__label + input:checked + .radio-group__label:before { border-radius: 0 5px 5px 0; transform: translate3d(-6px, 0, 0);
}
.radio-group__option:checked + label { color: #389E29;
}
.radio-group__option { display: none;
}

Cool Radio - Script Codes JS Codes

// from - http://cssdeck.com/labs/ql8jmgjt
function updateLog() { var one = $("#opt_1:checked").val() ? "On" : "Off" var two = $("#opt_2:checked").val() ? "On" : "Off" $(".log").html("Everyone: " + one + "<br/>Just for me: " + two)
}
$(".radio-group__option").change(updateLog)
Cool Radio - Script Codes
Cool Radio - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 24, 2022
Rating 4.5
Size 4,023 Kb
Views 30,360
Do you need developer help for Cool Radio?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric Rogg (er40) Script Codes
Name
Casestudy
A Pen by Eric Rogg
Google Play Ratings
Header
JQuery Progress Bar22
Checkbox
Dark Social Navigation
Simple List
Sign Up Form
Tri color loader test
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!