creating a random background color in SASS - html

Question

I am attempting to have a rollover effect have 1-3 different colors in Sass. How would I do this? Here's my code so far..
input[type=submit] {
font-size:1.3em;
padding:5px;
font-family:$paragraphFont;
width:400px;
border:1px solid #888;
box-sizing:border-box;
margin-top:15px;
cursor:pointer;
transition:background-color .2s ease-in-out;
&:hover {
cursor:pointer;
background-color:#3cde77;
}
}
<form>
<p>Name:</p><input type="text" />
<p>Email:</p><input type="text" />
<p>Message:</p><textarea></textarea>
<input type="submit" value =" Send Message" />
</form>
I image you could use the random() function somehow and assign my colors to a number but I don't know how.
Any thoughts guys?

Answer 1

What You can do is a random function of SCSS
$repeat: 10; // 10 iterations
input[type=submit]{
#for $i from 1 through $repeat{
&:nth-child(#{$i}) {
background-color: rgb(random(255),random(255),random(255));
}
}
}

Answer 2

I was able to do this using JS. It randomly picks from 3 different colors each time your hover over the Send Message button. It then reverts to an initial grey color.
var send = document.querySelector('.send');
send.addEventListener("mouseover", function() {
var colors3 = ["red", "green", "blue"];
var randomColor = colors3[Math.floor(Math.random() * 3)];
this.style.backgroundColor = randomColor;
});
send.addEventListener("mouseout", function() {
this.style.backgroundColor = "darkgrey";
});
input[type=submit] {
font-size: 1.3em;
padding: 5px;
font-family: $paragraphFont;
width: 400px;
border: 1px solid #888;
box-sizing: border-box;
margin-top: 15px;
cursor: pointer;
transition: background-color .2s ease-in-out;
background-color: darkgrey;
}
<form>
<p>Name:</p><input type="text" />
<p>Email:</p><input type="text" />
<p>Message:</p><textarea></textarea>
<input type="submit" class="send" value=" Send Message" />
</form>
http://codepen.io/anon/pen/ryowjZ

Answer 3

This is not a complete solution, and I'm sure it's not a good solution, but it is a pure CSS solution: http://codepen.io/anon/pen/oZJqxR
The idea is that you have your button constantly cycling background colors with a CSS keyframe animation, but hidden behind a mask. When you hover, the mask is removed and the animation is paused, giving you a 'frozen' color that is picked based on where the cycle is when your mouse enters the button.
HTML:
<button><span>Hover me</span></button>
The CSS
button {
padding: 0.5rem 2rem;
border: 1px solid #CCC;
font-size: 1.5rem;
background: pink;
position: relative;
-webkit-animation: cycle 1s steps(3) infinite;
animation: cycle 1s steps(3) infinite;
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #DDD;
}
button span {
position: relative;
z-index: 1;
}
button:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
button:hover:after {
display: none;
}
#keyframes cycle {
50% {
background: blue;
}
100% {
background: green;
}
}
This currently isn't picking cleanly between the 3 stated colors - some intermediate colors are shown. This is down to the keyframe animation and the steps declaration on the button - I'm sure it can be done, but it requires fine-tuning.
Last caveat - this is way more resource intensive than just picking a colour with javascript - it would get very heavy if you had more than a couple of these elements on a page at once.