Help. How to make a button light up in html?
2014-10-15, 10:43 PM,
#1
alright so im wondering how can i make my button light up when i hover over it. or change color in my website ;O?

hope someone can help me out!
ty
Reply
2014-10-15, 10:51 PM,
#2
I can help you with this.
add me on skype: fkn-productions

-Fknpro
Reply
2014-10-15, 11:04 PM,
#3
I can but I won't share t here for everyone, PM me if you want the code
Reply
2014-10-15, 11:20 PM,
(This post was last modified: 2014-10-15, 11:20 PM by Ownyzo.)
#4
The most simple method is to use css.
Here read this GUIDE (w3schools)
Reply
2014-10-15, 11:30 PM,
#5
Dont know if this is what you're looking for, but test it out :)
Code:
--Simple html--
<button>Click me!</button>
Code:
--CSS--
button
{
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 20px auto;
    color: #ccc;
    background-color: #555;
    background: -webkit-linear-gradient(#888, #555);
    background: linear-gradient(#888, #555);
    border: 0 none;
    border-radius: 3px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
    cursor: pointer;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
}

button:hover, button:focus
{
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
    
@-webkit-keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
        
@keyframes pulsate
{
    0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
    50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
    100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button:active
{
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-animation: none;
    animation: none;
}
Kind regards,
Wezzlan!
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  How Can I Make A Landing Page With Generator? shervin 0 8 27 minutes ago
Last Post: shervin
  [JAVA SCRIPT] Need someone to make me an executable!!! CagelessBrain 0 75 2017-10-17, 04:09 AM
Last Post: CagelessBrain
  How to make Money Spamming ?? vincenzot_t 9 288 2017-10-07, 01:14 AM
Last Post: faithalo
  Can you make money with this method on fb? CagelessBrain 2 144 2017-10-06, 03:51 PM
Last Post: CagelessBrain
  How to make ONLY 10$ a Day ?? Tired of Failure vincenzot_t 17 1,132 2017-09-17, 02:43 AM
Last Post: vincenzot_t




About Us | Contact Us | CPA Elites | Advertise | Stats | Staff Team

© 2013-2017 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top