HearthStone – style buttons / CSS + HTML

Greetings friends and fellows,

Small css and Html code to get exactly like in HearthStone Play now button.

HearthStone Button
( Final look )

HTML:


< div class="hs-wrapper classic">
<a class='hs-button classic' href="">
<span class='hs-border classic'>
<span class='hs-text classic'>
Play Now
</span>
</span>
</a>
</div>

and here is CSS:

 

By changing class name “classic” you can get four different results – “green”, “silver”, “gold” and “classic” in purple colour. All you have to do is change class name. Example: ” class=gold

HearthStone Green button

“HearthStone” Green button

“HearthStone” Silver button

“HearthStone” Golden button

HearthStone โ€“ style buttons

“HearthStone” Classic button


/* Button HearthStone Base
โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“ */
.hs-wrapper {
    cursor: pointer;
    width: 200px;
    padding: 0 2px;
    border-right: none;
    border-left: none;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.35);
    border-radius: 5px;
}

.hs-button {
    display: block;
    text-align: center;
    border-radius: 2px;
    border: solid 3px #795548;
}

.hs-text {
    display: table-cell; width: 100%;
    vertical-align: middle;
    padding: 9px 24px;
    padding: 0.6rem 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 0 4px #000, 0 0 8px #000;
    font-size: 20px;
    font-size: 1.25rem;
    letter-spacing: 2px;
}

.hs-border{
    display: table;
    padding: 3px;
    border-radius: 2px;
    height: 35px;
    min-height: 35px;
    width: 100%;
    /* Font style */
    text-transform: uppercase;
    font-family: 'Fondamento', cursive;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px #000;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
}


/* HearthStone Classic Violet Button
โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“ */
.hs-wrapper.classic {
    background-color: #c1b3b0;
    background: linear-gradient(to bottom,
        #c1b3b0,
        #c1b3b0 9%,
        #4a3424 93%,
        #1c140d);
    border-top: 2px solid #AD9A90;
    border-bottom: 2px solid #1c140d;
}
.hs-button.classic {
    background: linear-gradient(to bottom,
        #6f5742,
        #81615d);
}

.hs-text.classic {
    background: radial-gradient(circle,
        #bc22c7 25%,
        #7c1693 75%,
        #5c1096);
}

.hs-border.classic {
    background-color: #BC22C7;
    box-shadow: 0px 2px 6px 0px #331e0b;
    background: linear-gradient(to bottom,
        #f756fe,
        #c84bd6 5%,
        #7305ae 59%,
        #661f91);  
}

.hs-border:hover .hs-text.classic {
    background: radial-gradient(circle,
        #e235ee 22%,
        #981cb4);
}


/* HearthStone Green Button
โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“ */
.hs-wrapper.green {
    background-color: #d8be52;
    background: linear-gradient(to bottom,
        #d8be52, #a77d33 9%,
        #5f3f1d 93%,
        #1c140d);
    border-top: 2px solid #d8be52;
    border-bottom: 2px solid #1c140d; 
}

.hs-button.green {
    background: linear-gradient(to bottom,
        #6f5742,
        #81615d);
}

.hs-text.green {
    background: radial-gradient(circle,
        #05c4b2 25%,
        #009688 75%,
        #015f57);
}

.hs-border.green {
    background-color: #009688;
    box-shadow: 0px 2px 6px 0px #014640;
    background: linear-gradient(to bottom,
        #18e9d5,
        #13bcab 5%,
        #015f57 59%,
        #014640);
}

.hs-border:hover .hs-text.green {
	background: radial-gradient(circle,
        #18e9d5 22%,
        #05a193 83%,
        #028277);
}


/* HearthStone Silver Button
โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“ */
.hs-wrapper.silver {
    background-color: #d8be52;
    background: linear-gradient(to bottom,
        #d8be52,
        #a77d33 9%,
        #5f3f1d 93%,
        #1c140d);
    border-top: 2px solid #d8be52;
    border-bottom: 2px solid #1c140d;
}

.hs-button.silver {
    background: linear-gradient(to bottom,
        #6f5742,
        #81615d);
}

.hs-text.silver {
    background: radial-gradient(circle,
        #b6c2dd 25%,
        #838da5 75%,
        #43506e);
}

.hs-border.silver {
    background-color: #a1b9e8;
    box-shadow: 0px 2px 6px 0px #3a4663;
    background: linear-gradient(to bottom,
        #bfcce6,
        #a1b9e8 5%,
        #43506e 59%,
        #3a4663);
}

.hs-border:hover .hs-text.silver {
    background: radial-gradient(circle,
        #cfdbf5 22%,
        #a3afcc 83%,
        #697da9);
}


/* HearthStone Gold Button
โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“โ€“ */
.hs-wrapper.gold {
    background-color: #d8be52;
    background: linear-gradient(to bottom,
        #d8be52,
        #a77d33 9%,
        #5f3f1d 93%,
        #1c140d);
    border-top: 2px solid #d8be52;
    border-bottom: 2px solid #1c140d;
}

.hs-button.gold {
    background: linear-gradient(to bottom,
        #6f5742,
        #81615d);
}

.hs-text.gold {
    background: radial-gradient(circle,
        #edca37 25%,
        #a77d33 75%,
        #5f3f1d);
}

.hs-border.gold {
    background-color: #a77d33;
    box-shadow: 0px 2px 6px 0px #362c26;
    background: linear-gradient(to bottom,
        #d8be52,
        #d5b631 5%,
        #5f3f1d 59%,
        #362c26);
}

.hs-border:hover .hs-text.gold{
    background: radial-gradient(circle,
        #fed83b 22%,
        #dba23e 83%,
        #9d6224);
}

 


CakeForge_Thanks_for_watching

Follow us on Twitterย @CakeFrogeย orย Facebook!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: