Menu icon Foundation
Multiple text color and hover links help

EDITED

Just edited this post in order to make my case simplier to understand, lol.

I want to achieve the same functionality as buttons but to text and their links. So i can make a new color and the hover state changes the same as buttons.
The button code tha changes the color it´s in de following code area.
Some ideas or insights ??
Thanks in advance

// We use this mixin to add button color styles
//
// $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
// $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
// $border-color - Button Border Color. Default: $button-border-color
@mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {

  // We control which background styles are used,
  // these can be removed by setting $bg:false
  @if $bg {

    @if $bg-hover == null {
      $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
    }

    @if $border-color == null {
      $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
    }

    // This find the lightness percentage of the background color.
    $bg-lightness: lightness($bg);
    $bg-hover-lightness: lightness($bg-hover);

    background-color: $bg;
    border-color: $border-color;
    &:hover,
    &:focus { background-color: $bg-hover; }

    // We control the text color for you based on the background color.
    color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);

    &:hover,
    &:focus {
      color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
    }
  }

  // We can set $disabled:true to create a disabled transparent button.
  @if $disabled {
    cursor: $button-disabled-cursor;
    opacity: $button-disabled-opacity;
    box-shadow: none;
    &:hover,
    &:focus { background-color: $bg; }
  }

  // We can control how much button radius is used.
  @if $radius == true { @include radius($button-radius); }
  @else if $radius { @include radius($radius); }

}

            

         

multiple text color link sass button

EDITED

Just edited this post in order to make my case simplier to understand, lol.

I want to achieve the same functionality as buttons but to text and their links. So i can make a new color and the hover state changes the same as buttons.
The button code tha changes the color it´s in de following code area.
Some ideas or insights ??
Thanks in advance

// We use this mixin to add button color styles
//
// $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
// $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
// $border-color - Button Border Color. Default: $button-border-color
@mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {

  // We control which background styles are used,
  // these can be removed by setting $bg:false
  @if $bg {

    @if $bg-hover == null {
      $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
    }

    @if $border-color == null {
      $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
    }

    // This find the lightness percentage of the background color.
    $bg-lightness: lightness($bg);
    $bg-hover-lightness: lightness($bg-hover);

    background-color: $bg;
    border-color: $border-color;
    &:hover,
    &:focus { background-color: $bg-hover; }

    // We control the text color for you based on the background color.
    color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);

    &:hover,
    &:focus {
      color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
    }
  }

  // We can set $disabled:true to create a disabled transparent button.
  @if $disabled {
    cursor: $button-disabled-cursor;
    opacity: $button-disabled-opacity;
    box-shadow: none;
    &:hover,
    &:focus { background-color: $bg; }
  }

  // We can control how much button radius is used.
  @if $radius == true { @include radius($button-radius); }
  @else if $radius { @include radius($radius); }

}

            

         
Rafi Benkual over 4 years ago

You can apply :hover effects to a link or text in CSS

Text
http://codepen.io/rafibomb/pen/gbQGrz

With Links
Here is an example http://codepen.io/rafibomb/pen/pvQoRe

Is this what you meant?

Alejandro over 4 years ago

well, was able to do it in a similar way. But i have to edit the css with 9 more colors. I was wondering if there´s a way to do it in a function or semething similar.
Here´s an example of how i did it, multiply the code by 9:

$electronica   : hsl(26,91%,56%);//#f5822b

.color-scheme-electronica {
    @include colour-scheme($electronica, $electronica, $electronica);
    a:hover{color:darken($electronica, 20%)}
    .btn-electronica { 
      @include button($bg:$electronica);
    }
}