Html Css Button

Berikut mywapmaster tampilkan jenis-jenis tombol/Button yang telah di modifikasi dengan Html dan css bersumber dari w3c, Button biasanya di gunakan pada form baik itu input atau submit dan tombol Download.

Button
Default Button
<button>Default Button</button>

Button Link
Link Button
<style> .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <a href="#" class="button">Link Button</a>

Input Button

<input type="button" value="Input Button">

Button color
Red
<style> .button { background-color: #f44336; /* red */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <button class="button">Red</button>

Button Size
16px
<style> .button { background-color: #008CBA; /* Blue */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <button class="button">16px</button>

Button Rounded
16px
<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 16px; } </style> <button class="button">16px</button>

Button Border
Red
<style> .button { background-color: transparent; color: #990000 !important; border: 2px solid #990000 !important; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <button class="button">Red</button>

Button Width
250px

<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 250px; }</style> <button class="button">250px</button>

Button Hover
Hover
<style> .button { vertical-align:middle; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; position: relative; transition: 0.5s; } .button span:after { content: ' » '; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover {border:3px solid #f4511e; background-color: #008CBA; color:#f4511e;} .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } </style> <button class="button"><span>Hover </span></button>