Everyone likes Gradients. A selection of Gradient Buttons that change the Background Color when Hovering. The direction can be set in the CSS (see comment or check the JS-Panel for Instruction)
Created
March 1, 2017 13:26
-
-
Save CodeMyUI/7cea7968f44510f7dd5954b6c7e1cb2a to your computer and use it in GitHub Desktop.
Gradient Buttons with Background-Color Change (CSS-only)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<a class="btn btn-1">Hover me</a> | |
<a class="btn btn-2">Hover me</a> | |
<a class="btn btn-3">Hover me</a> | |
<a class="btn btn-4">Hover me</a> | |
<a class="btn btn-5">Hover me</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You can change the directon of the background change in the :hover state. Don't forget to then also change the background-color direction in the button itself. Let me know if you need any help. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* <- Demo Stuff Start */ | |
body{ | |
font-family: 'Montserrat', sans-serif; | |
margin:0; | |
} | |
.container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
align-content: center; | |
flex-wrap: wrap; | |
width: 80vw; | |
margin: 0 auto; | |
min-height: 100vh; | |
} | |
.btn { | |
flex: 1 1 auto; | |
margin: 10px; | |
padding: 30px; | |
text-align: center; | |
text-transform: uppercase; | |
transition: 0.5s; | |
background-size: 200% auto; | |
color: white; | |
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/ | |
box-shadow: 0 0 20px #eee; | |
border-radius: 10px; | |
} | |
/* Demo Stuff End -> */ | |
/* <- Magic Stuff Start */ | |
.btn:hover { | |
background-position: right center; /* change the direction of the change here */ | |
} | |
.btn-1 { | |
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%); | |
} | |
.btn-2 { | |
background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%); | |
} | |
.btn-3 { | |
background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%); | |
} | |
.btn-4 { | |
background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%); | |
} | |
.btn-5 { | |
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%); | |
} | |
/* Magic Stuff End -> */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment