creating a random background color in SASS

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?

Possible duplicate of [Returning a Random Position and Color With SASS](http://stackoverflow.com/questions/35237126/returning-a-random-position-and-color-with-sass) — Deepak Yadav, Mar 31 '17 at 08:03
Does the random color change on every hover, or just one every compile? — user1496463, Mar 31 '17 at 08:13
If it is during compile, then the link @DeepakYadav has mentioned will work perfectly. Otherwise you will want to use JS. — user1496463, Mar 31 '17 at 08:14
I have a website with three distinct colors i'm using. I would like each one of those colors to be a background hover on the submit button randomly. In the example Deepak presented, rgb(random(256)-1, random(256)-1, random(256)-1); What does the 256 represent? — Brixsta, Mar 31 '17 at 08:17

Salil Sharma · Answer 1 · 2020-01-03T08:45:19.710

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));            
      }
    }
  }

edited Jan 03 '20 at 08:45

answered Jan 03 '20 at 07:15

Salil Sharma

514
1
5
14

score 0 · Answer 2 · answered Mar 31 '17 at 08:58

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

score 0 · Answer 3 · answered Mar 31 '17 at 13:49

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.

creating a random background color in SASS

3 Answers3