QUICK TIP - Button Templates Using CSS – Creating buttons with COOL Effects ever

Button Templates Using CSS – How to create
If you are a visitor who often visits our tutorials, you will know the basic thing to create any effect on front-end. Can you guess what it is? Yeah, CSS & HTML are the two things always involve to our projects. They work together to create your expected effects. You can review more how they work from different cool effects including bubbles effect, smile face effect, ring phone effects… There are two main parts that you should do to create the effects including HTML & CSS. If you are not sure how to do you can learn through some free courses on our website. If you do not have time you can copy and paste the following codes below. However, we recommend you should go to one or two basic courses to learn. They will help you a lot to understanding the codes and also you can create new effects by yourself like these button Templates Using CSS in the future.HTML – Creating button template structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <!-- example 1 --> <div class="type-1"> <div> <a href="" class="btn btn-1"> <span class="txt">Hover me</span> <span class="round"><i class="fa fa-chevron-right"></i></span> </a> </div> </div> <!-- example 2 --> <div class="type-2"> <div> <a href="" class="btn btn-2"> <span class="txt">Hover me</span> <span class="round"><i class="fa fa-chevron-right"></i></span> </a> </div> </div> <!-- example 3 --> <div class="type-3"> <div> <a href="" class="btn btn-3"> <span class="txt">Hover me</span> <span class="round"><i class="fa fa-chevron-right"></i></span> </a> </div> </div> |
CSS – Adding properties to create effects for buttons
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
/* Mau sac cua cac button */ .btn{ margin-bottom:20px; } .btn-1 { background-color: #F27935; } .btn-1 .round { background-color: #f59965; } .btn-2 { background-color: #00AFD1; } .btn-2 .round { background-color: #00c4eb; } .btn-3 { background-color: #5A5B5E; } .btn-3 .round { background-color: #737478; } /* Thiết lập chung cho các button */ a { text-decoration: none; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding: 12px 53px 12px 23px; color: #fff; text-transform: uppercase; font-family: sans-serif; font-weight: bold; position: relative; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; display: inline-block; } a span { position: relative; z-index: 3; } a .round { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 38px; height: 38px; position: absolute; right: 3px; top: 3px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } a .round i { position: absolute; top: 50%; margin-top: -6px; left: 50%; margin-left: -4px; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .txt { font-size: 14px; line-height: 1.45; } /* button example 1 */ .type-1 a:hover { padding-left: 48px; padding-right: 28px; } .type-1 a:hover .round { width: calc(100% - 6px); -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .type-1 a:hover .round i { left: 12%; } /* button example 2 */ .type-2 a:hover .round { background: none; } .type-2 a:hover .round i { left: 70%; } /* button example 3 */ .type-3 .round { background: transparent; } .type-3 a { position: relative; overflow: hidden; } .type-3 a.btn-1:after { background-color: #f59965; } .type-3 a.btn-2:after { background-color: #00c4eb; } .type-3 a.btn-3:after { background-color: #737478; } .type-3 a:after { content: ""; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 37px; height: 38px; position: absolute; right: 3px; top: 3px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .type-3 a:hover:after { right: 100%; width: 50%; } .type-3 a:hover i { margin-left: 4px; } |