アニメーションをつけてみました。
HTML
<ul data-color="red" class="colors"> <li data-color="red" class="btn color"></li> <li data-color="blue" class="btn color"></li> <li data-color="green" class="btn color"></li> <li data-color="yellow" class="btn color"></li> </ul>
SCSS
.colors { $colors : "red", "blue", "green", "yellow"; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 544px; height: 88px; @each $color in $colors { &[data-color="#{$color}"] { .color { &[data-color="#{$color}"] { &:before { margin: -36px; width: 72px; height: 72px; } } } } } } .color { float: left; position: relative; margin: 0 24px; border-radius: 50%; width: 88px; height: 88px; overflow: hidden; cursor: pointer; &:before { display: block; position: absolute; top: 50%; left: 50%; margin: -6px; border-radius: 50%; width: 12px; height: 12px; content: ""; opacity: 0; transition: all ease-out .15s; } &:after { box-sizing: border-box; display: block; position: relative; margin: 20px; border-radius: 50%; width: 48px; height: 48px; content: ""; } &[data-color="red"] { &:before { background: linear-gradient(#FF8A80, #D50000); opacity: .3; } &:after { background: linear-gradient(#FF8A80, #D50000); } } &[data-color="blue"] { &:before { background: linear-gradient(#8C9EFF, #304FFE); opacity: .3; } &:after { background: linear-gradient(#8C9EFF, #304FFE); } } &[data-color="green"] { &:before { background: linear-gradient(#A7FFEB, #00BFA5); opacity: .3; } &:after { background: linear-gradient(#A7FFEB, #00BFA5); } } &[data-color="yellow"] { &:before { background: linear-gradient(#FFE57F, #FFAB00); opacity: .3; } &:after { background: linear-gradient(#FFE57F, #FFAB00); } } }
JavaScript
document.querySelector(".colors").addEventListener("click", function (evt) { this.setAttribute("data-color", evt.target.getAttribute("data-color")); }, false);