hesap-button

hesap-button.markdown

hesap-button

A Pen by muhammedzaim on CodePen.

License.

index.html

<button class="start-button">Hesabımı Oluştur</button>

<button class="login-button">Hesabıma Giriş</button>

<button class="stop-button">Hesabımı Sil</button>

<button class="search-button-y"><i class="fa fa-search" aria-hidden="true"></i></button>

<button class="search-button-m"><i class="fa fa-search" aria-hidden="true"></i></button>

<button class="search-button-k"><i class="fa fa-search" aria-hidden="true"></i></button>


<br>


<button class="search-button-y"><i class="fa fa-plus" aria-hidden="true"></i></button>

<button class="search-button-m"><i class="fa fa-plus" aria-hidden="true"></i></button>

<button class="search-button-k"><i class="fa fa-plus" aria-hidden="true"></i></button>

script.js

$(document).ready(function(){
    $("button").click(function(){
     $("button").addClass("animated bounceIn");
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

button{
  outline: none;
}


button.start-button {
    border-radius: 100px;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(279deg, #00e676, #15d477);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 0.9px;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 13px;
    padding-bottom: 13px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 30px;
    border: none;
}



button.stop-button {
    border-radius: 100px;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(279deg, #ff597e, #e0254e);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 0.9px;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 13px;
    padding-bottom: 13px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 30px;
    border: none;
}

button.login-button {
    border-radius: 100px;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(279deg, #55acee, #0090ff);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 0.9px;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 13px;
    padding-bottom: 13px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 30px;
    border: none;
}



button.search-button-y {
    border-radius: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(279deg, #00e676, #15d477);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    font-style: normal;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 13px;
    width: 60px;
    margin-top: 15px;
    margin-bottom: 30px;
    border: none;
  font-size: 25px;
}

button.search-button-m {
    border-radius: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(279deg, #55acee, #0090ff);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    font-style: normal;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 13px;
    width: 60px;
    margin-top: 15px;
    margin-bottom: 30px;
    border: none;
  font-size: 25px;
}

button.search-button-k {
    border-radius: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(279deg, #ff597e, #e0254e);
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    font-style: normal;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 13px;
    width: 60px;
    margin-top: 15px;
    margin-bottom: 30px;
    border: none;
  font-size: 25px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />