<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container text-center"> <div class="row"> <div class="div1 col-lg-3"> <h2>HARUN PEHLİVAN <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></h2> </div> <div class="div2 col-lg-3"> <h2>TICENT 2008 <a href="http://tercuman-bilisim-mer.ticiz.com" target="_blank">TEBİM</a></h2> </div> <div class="div3 col-lg-3"> <h2>TETRDCENT 2012 <a href="http://harunpehlivantebimtebitagem.business.site/" target="_blank">TEBİTAGEM</a></h2> </div> </div> <button class="btn btn-danger" type="button">click</button> </div>

.container { box-sizing:border-box; margin-top:40px } .div1, .div2, .div3 { margin:40px ; border:1px solid #000; height:200px; background:#014976; transition:all 2s ease-in-out; box-shadow:10px 10px 30px #999 } h2 { font-weight:bold } button.btn { margin-top:20px; width:200px; font-size:25px; font-weight:bold; padding:15px } .blue { background:#8aceff; color:#7067E8; border:1px solid #7067E8; transform:rotate(360deg) }

$(document).ready(function(){ $("button").click(function(){ $(".div1").toggleClass("blue"); $(".div2").toggleClass("blue"); $(".div3").toggleClass("blue"); }); });