Skip to content

Instantly share code, notes, and snippets.

@ricardozea

ricardozea/aqua-style-buttons-mixin.scss

Last active June 23, 2020 11:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ricardozea/4261914 to your computer and use it in GitHub Desktop.
Save ricardozea/4261914 to your computer and use it in GitHub Desktop.
Download ZIP
SCSS: Aqua style buttons mixin
Raw
aqua-style-buttons-mixin.scss
/* Aqua style buttons mixin
Demo on Codepen:
http://codepen.io/rzea/pen/CgIzG/
*/
//Variables
$solidColor: #000; // Change this color to anything you want, leave everything else as is
$gradientFilters: rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50.01%;
//Usage
@include background(linear-gradient($gradientFilters), $solidColor);
//Example
.button {
display:inline-block;
padding:15px 30px;
text-decoration:none;
color:#fff;
border-radius:3px;
@include background(linear-gradient($gradientFilters), $solidColor);
}
@korbav
Copy link

korbav commented Jun 23, 2020

Great one!

A small improvement to manage the intensity of the effect :

@mixin aqua-effect($color, $intensity: 1) {
  $adjusted-intensity: min(1, max(0, $intensity * 0.2));
  background: linear-gradient(rgba(255, 255, 255, $adjusted-intensity) 50%, rgba(255, 255, 255, 0) 50.01%), $color;
}

@ricardozea
Copy link
Author

This is great!

CodePen demo is updated with the mixin and proper credits :)

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment