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 to make video proof? kazurengan 15 380 Yesterday, 12:09 AM
Last Post: cohzynes
  Where should I put <script> tags in HTML? Pirata 5 177 2017-12-03, 11:38 AM
Last Post: Pirata
  How can I make a Mediafire content locker ? TheSillyHat 4 183 2017-12-02, 12:56 AM
Last Post: lizha11
  What niche should i make for you guys? Enabled 18 405 2017-11-27, 04:12 AM
Last Post: Enabled
  How do you make multiple proxies from a dedicated server? Mesina 1 177 2017-11-13, 04:41 PM
Last Post: CharlieHarper





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

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